CODEWITHSUNDEEP
htmlcss
ahsu
ahsu

Reputation: 67

Rounded corners in a table

I am trying to create rounded corners for my 3 column table (CSS table). I used:

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

in my CSS, but what I get is the top image. What I want it to look like is the bottom image.

Table with rounded corners

Is there any way that this can be done?

Upvotes: 1

Views: 352

Answers (4)

ThinkingStiff
ThinkingStiff

Reputation: 65361

If you want to do each row, use the CSS pseudo-classes :first-child and :last-child.

enter image description here

Demo: http://jsfiddle.net/ThinkingStiff/R792K/

CSS:

table { border-spacing: 0; }

td {
    border-top: 1px solid black;  
    border-left: 1px solid black;  
    border-bottom: 1px solid black;  
    padding: 10px;       
}

td:first-child {
    border-top-left-radius: 4px;    
    border-bottom-left-radius: 4px;    
}

td:last-child {
    border-top-right-radius: 4px;    
    border-bottom-right-radius: 4px;    
    border-right: 1px solid black;  
}   ​

HTML:

<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>​

Upvotes: 3

Marat Tanalin
Marat Tanalin

Reputation: 14123

TD:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

TD:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

Upvotes: 2

bookcasey
bookcasey

Reputation: 40493

Demo

table { border-radius:10px; }

Upvotes: 3

msonsona
msonsona

Reputation: 1311

I'd suggest enclosing the whole table in a <div> and then rounding the corners of that div

Upvotes: 2

Related Questions