CODEWITHSUNDEEP
htmlcss
RadicalActi
RadicalActi

Reputation: 191

Round thead corners in Firefox with CSS

I would actually want to round thead's corners within a table. It doesn't seems to be possible as far as I'm concerned. I have tried almost everything but I couldn't get it work.

The problem is that I basically have a table which's thead has a particual color, let's say black, and I'd like to give it a little rounding by rounding it's corners.

Can anyone please tell me how is it possible?

Here is the jsFiddle I have tried so far:

HTML:

    <table>
    <thead>
        <tr>
            <th>First</th>
            <th>Second</th>
            <th>Third</th>
        </tr>
    </thead>
</table>

CSS:

table {
    margin: 0px auto;
    clear: both;
    width: 100%;
    border: 1px solid white;
   -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: white;
}

table thead {
    background: black;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

http://jsfiddle.net/fhyWp/2/

Upvotes: 7

Views: 24444

Answers (2)

Abdul Malik
Abdul Malik

Reputation: 2642

  table  th:nth-child(1){

    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: 3px 0px 0px 3px; 

    /* Firefox 1-3.6 */
    -moz-border-radius: 3px 0px 0px 3px; 
  
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 3px 0px 0px 3px; 
    }

    table  th:nth-last-child(1){
      /* Safari 3-4, iOS 1-3.2, Android 1.6- */
      -webkit-border-radius: 0px 3px 3px 0px; 

      /* Firefox 1-3.6 */
      -moz-border-radius: 0px 3px 3px 0px; 
  
      /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
      border-radius: 0px 3px 3px 0px;
}

Fiddle

Upvotes: 5

Cfreak
Cfreak

Reputation: 19319

EDIT in 2020 as I've seen some activity on this answer recently.

These days you should just use the border-radius property as all the major browser now support it.

th {
    border-radius: 3px;
}

Because the radius needs to be on th not on thead. Add something like:

th {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

(you could remove the border radius info from table thead)

Also works if you just change table thead to th

If you have borders, the table's border-collapse css property must be set to 'separate'.

table{
    border-collapse: separate;
}

Upvotes: 15

Related Questions