Forum Moderators: not2easy
I.e.
table {
...rounded corners...
}
td {
..background color...
}
The background color of the td will be above the rounded corner of the table itself. The only fix I came up with so far is to apply rounded corners to the td, but I want to avoid that - because it seems like doing the job twice.
As you can see, there is no problem with the rounded corners (except for the normal browser issues, but assuming you use Firefox or similar, you'll see the rounded borders).
However, as soon as a background color is added to the TD's, then they "override" the border - because the TD's themselves don't have any rounded borders. Assigning that to the TD's is troublesome (you have to mark top-left, top-right, bottom-left and bottom-right TD with proper CSS classes, and that just makes things complicated...).
[edited by: swa66 at 8:49 pm (utc) on June 22, 2009]
[edit reason] No personal links please see ToS and forum charter [/edit]
...you have to mark top-left, top-right, bottom-left and bottom-right TD
with proper CSS classes, and that just makes things complicated...
There is no short cut to this problem.
Surely, logic should tell you that individual corners will require individual code. :)
birdbrain
e.g.:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
div {
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 1px solid black;
background-color: yellow;
}
p {
height: 80px;
width: 80px;
margin: 10px;
border: 1px solid red;
background-color: orange;
}
</style>
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>
[edited by: swa66 at 9:45 pm (utc) on June 22, 2009]
it will work as I suggested in my previous post...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css"><title></title>
<style type="text/css">
#table2{
width:200px;
border: 1px solid #000;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
}
#table2 tr.row1 td, #table2 tr.row3 td, #table2 tr.row5 td {
background-color: #ccc;
}
#table2 #td1{position:relative;z-index:0;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-khtml-border-radius-topleft:10px;
}
#table2 #td2{
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-khtml-border-radius-topright:10px;
}
#table2 #td3{
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-khtml-border-radius-bottomleft:10px;
}
#table2 #td4{
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-khtml-border-radius-bottomright:10px;
}
</style></head>
<body><table id="table2" cellpadding="0" cellspacing="0">
<tbody><tr class="row1">
<td id="td1">1.1</td>
<td>1.2</td>
<td id="td2">1.3</td>
</tr>
<tr class="row2">
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr class="row3">
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
<tr class="row4">
<td>4.1</td>
<td>4.2</td>
<td>5.3</td>
</tr>
<tr class="row5">
<td id="td3">5.1</td>
<td>5.2</td>
<td id="td4">5.3</td>
</tr>
</tbody></table></body>
</html>
e.g:
table tr:last-child td:first-child {
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-khtml-border-radius-bottomleft:10px;
}
:last-child is a CSS3 selector, but all browsers supporting border radius support that one too.
