Alex Rivera | Logout

Rounded Corners on DIVs with Background Color

Asked 2011-06-26T15:25:10.807
29

I've got some code that looks like this:

<div id="shell">
    <div id="title">TITLE HERE</div>
    <div id="content">Article Content Goes Here</div>
</div>

The shell div has a grey border that I want rounded corners on. The problem I'm running into is the title div has a green background and it's overlapping the rounded corners of the shell. It either overlaps or doesn't jut up against the edges to provide a fluid look.

I'm looking for a solution that's backwards compatible with IE 7 and 8, but if there's a solution in HTML5 that's simple I would be willing to lose those browsers.

Thanks!

css html rounded-corners
Edit
Report

1 Answer

0

Internet Explorer did not support border-radius until IE9, much to the frustration of developer and designers. With IE9, the important steps are using the edge META tag and provide the border radius:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

Source - http://davidwalsh.name/css-rounded-corners

I'd rather use images, but IE can do down the drain. Microsoft should step up it's game, and support CSS3.

answered 2011-06-26T15:28:59.587

Your Answer