The easier way, ways actually, doesn’t currently fit your coding strategy. And strategy, not code is what you must address for this . Obe Wan says “Let go Luke.” This is not the “dak side” it is in fact how HTML is structured.
<h2></h2>
<div class=“content”>
</div>
Style the CALCULATED WIDTH (border/padding included) to be the same for BOTH elements. Give the h2 corner a round style for the top corners only and the div a rounded style for the bottom.
A more BALLSY …dare I say it… almost DS60 way… of doing this: Do not use margin for spacing between elements, size everything as above, EXCEPT do it to the P element and not .content, also no rounded corners on Ps ( just left-right borders), use padding to space the content, finally apply a bottom border and bottom corner radius .lastP
<h2></h2>
<p>text</p>
<p>text</p>
<p class=“lastP”></p>
( I can only imagine your face about now, but believe me this is ALMOST as smeantic and optimized as it gets.)
Now IF WE THINK FURTHER… we realize the following:
Pretty much any UA that supports border-radius properties, also supports last-child and adjacent siblings. Meaning if you are going to use ONE CSS3 property , might as well take full advantage of CSS3 (to what ever level you can)… I also seee that you WANT a wrapper around you content, tho it’s not necessary.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.article {width:255px; }
.article h2 { border:2px solid pink; border-bottom:none; -moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0 ; padding:10px; margin:0; color:#fff; background: #000;
-moz-background-clip: border; /* these are to account for a webkit/ moz rendering bug*/
-webkit-background-clip: padding-box;
}
.article p { border-right:2px solid pink; border-left:2px solid pink; margin:0 ; padding: 20px 10px 0 10px}
.article p:last-child { border-bottom:2px solid pink; padding-bottom: 20px;
-moz-border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px ;
}/*you can still add a class to the last P manually if you want to support IE<8, even tho IE<* doesnt do rounded corners anyway.*/
</style>
</head>
<body>
<div class="article">
<h2>Ed, Edd and Eddie</h2>
<p> text here</p>
<p> text here</p>
<p> text here</p>
</div>
</body>
</html>
We COULD elaborate the CSS, so that instead of having to wrap each “article” in it’s own DIV , we just use one “column” wrapper ( in case we wanted to flat them all together) and let the beginning/ end of each article be defined by an H2 ( which is the most optimized and semantically way to do it). But Let’s take this one step at a time.
