Rounded Corners DIV

HTML & CSS
1

Hi there,

I would like to have the top part of my div have rounded corners (right and left) but not the bottom part of the div. The rounded corners would need to be part of my heading only, so that means i can change my backgound color of my heading but keep the color for the rest of my div to something else.

Would I need to have three divs for this?

<div class=“wrapper”>
<div id=“”>header with rounded corners on the top right and left</div>
<div class=“”>Regular column - Content goes here.</div>
</div>

How do I get this to work in CSS, the rounded corners for the top?

2

Is this for a commercial site or are you willing to use CSS3 on it?


-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
			  
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;

Easiest way to do it, but only works on modern browsers.

3

This seems like a job for the sliding doors technique.

4

Then use javascript such as DD_roundies for the older browsers, perhaps in a conditional statement (as it’s IE that gives the problems) But if you are ALSO adding shadows to a div, then when you use a conditional statement to add them in IE, you have problems with DD_roundies, and it’s best to just give IE either rounded corners of a shadow, not both.