CODEWITHSUNDEEP
csshtmlrounded-corners
Dexter
Dexter

Reputation: 1178

Rounded Corners on DIVs with Background Color

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!

Upvotes: 29

Views: 88408

Answers (5)

Mridul Kashatria
Mridul Kashatria

Reputation: 4187

In your markup, you have to give border-radius to both #shell and #title so that the #title's sharp corners don't overlap #shell's.

A live example, http://jsfiddle.net/BXSJe/4/

#shell {
  width: 500px;
  height: 300px;
  background: lightGrey;
  border-radius: 6px;
}

#title {
  background: green;
  padding: 5px;
  border-radius: 6px 6px 0 0;
}
<div id="shell">
  <div id="title">TITLE HERE</div>
  <div id="content">Article Content Goes Here</div>
</div>

Upvotes: 37

Edoardo Pirovano
Edoardo Pirovano

Reputation: 8334

You'll probably want to round just the top two corners of the title div with the same radius as the shell div so that they don't overlap. The CSS3 you would use is:

border-top-left-radius: XXpx
border-top-right-radius: XXpx

For backward compatibility with old Mozilla browsers you should also use:

-moz-border-radius-topleft: XXpx
-moz-border-radius-topright: XXpx

And for old versions of WebKit browsers (Safari, mainly), you can use:

-webkit-border-top-left-radius: XXpx
-webkit-border-top-right-radius: XXpx

However, there is nothing you can do about old Internet Explorer browsers as far as I know, except use images.

Upvotes: 3

obiyoda
obiyoda

Reputation: 381

Another way to accomplish this was to set the outer div to have a overflow to hidden

#shell {
 width:500px;
 height:300px;
 background:lightGrey; 
 border-radius: 10px 10px 10px 10px;
 overflow:hidden;
}
#title {
 background:green;
 padding:5px;
}

http://jsfiddle.net/jdaines/NaxuK/

Upvotes: 28

Michael Schwartz
Michael Schwartz

Reputation: 8415

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.

Upvotes: 0

planestepper
planestepper

Reputation: 3307

You can use PIE with IE7 and 8. It enables some CSS3 functionality in IE7 and IE8. And yes, I know, it is not a browser, it's a pain. Maybe a curse.

You can check it here.

Upvotes: 0

Related Questions