How to add border image in table

Forums CSSHow to add border image in table
Staff asked 2 years ago

How to add border image in the table tr element

Answers (1)

Add Answer
Staff answered 2 years ago

Here is a way you can add border image to table

// CSS

td,
th {
  border: 0;
  border-color: transparent;
  border-style: solid;
  -moz-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
  -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
  -o-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
  border-image: url(https://www.w3schools.com/cssref/border.png) 27 fill round;
  border-width: 0 0 25px;
}


.table {
  border: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 25px;
  -moz-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
  -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
  -o-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;
  border-image: url(https://www.w3schools.com/cssref/border.png) 27 fill round;
}

//HTML
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
      <th>Lols</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        something here
      </td>

      <td>
        whatever
      </td>

      <td># 6,0% / 12% wag.
      </td>
    </tr>
  </tbody>
</table>

Subscribe

Select Categories