CODEWITHSUNDEEP
cssborderrounded-corners
user1438243
user1438243

Reputation: 31

Table header with rounded corners and border

Is it possible for a table header to have rounded corners and a 1px border?

When I apply a border to the th elements, the border corners are square instead of round.

table {
  border-collapse: collapse;
}

th {
  background: cyan;
  border: 1px solid;
}

th:first-child {
  border-radius: 10px 0 0 0;
}

th:last-child {
  border-radius: 0 10px 0 0;
}

td {
  border: 1px solid;
}
<table>
  <tr><th>Col 1</th><th>Col 2</th></tr>
  <tr><td>a</td><td>b</td></tr>
  <tr><td>c</td><td>d</td></tr>
</table>

Upvotes: 3

Views: 15647

Answers (3)

Nikola Bogdanović
Nikola Bogdanović

Reputation: 3213

This makes all table headers (if you are using semantic th cells instead of body td cells) have rounded corners, but if you wish it for only selected tables - then rename the class to table.rounded th and just add rounded class to those tables:

th { 
    -khtml-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -ms-border-radius: 4px 4px 4px 4px;
    -o-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    border: solid 1px black;
}

EDIT: you need to have border-collapse: separate; on your table for this to be possible...

Upvotes: 4

Brad
Brad

Reputation: 198

Add a <div> wrapper inside of each <th>. Add your border styles to the wrappers.

table {
  border-collapse: collapse;
}

th {
  padding: 0;
}

th div {
  background: cyan;
  border: 1px solid;
  width: 80px;
}

th:first-child div {
  border-radius: 10px 0 0 0;
}

th:last-child div {
  border-radius: 0 10px 0 0;
}
<table>
  <tr>
    <th><div>Col 1</div></th>
    <th><div>Col 2</div></th>
    <th><div>Col 3</div></th>
    <th><div>Col 4</div></th>
  </tr>
</table>

Upvotes: 1

Kao
Kao

Reputation: 2272

You can use box-shadow to fake the border:

box-shadow: 0px 0px 2px #ddd inset;

Admittedly, this results in a brighter color than with normal borders, so you'll have to compensate for that.

Upvotes: 0

Related Questions