Of course, FireFox currently supports CSS rounded corners for DIVs, but sadly, the same cannot be said for IE. As developers and designers, we have to either accept that some people will not get the full effects of our website, or else we have to use the old methods to achieve parity for all browsers. This post is just to show you the easiest way to get the rounded corners effect in the old-school manner.
The big thing is to plan on how big you want your rounded corners to be. The reason is that you will have to fight with setting top and bottom margins of the same size as your corner radius, or just accept that there will be some space there. This easy way of going about things assumes you’ll be ok with a 12px radius and a 12px margin to match. We’re going to make a DIV 580px wide by 200px tall.
Start by opening up Adobe Illustrator or whatever other vector graphic tool you usually use for thsi type of thing and make a box that is 100px tall and 580px wide. Fill that box with the color of your non-bubbled background – that part of the web page that lies outside your bubble, in other words. My background color is #FFFFEE.
On a new layer, create another box with rounded corners of 12px radius, in exactly the same size. This new box should for the most part completely cover up the old box and should be the color you want the bubble to be. We’re assuming you want no border, but if you do, you’ll probably want to play around with this example a bit to figure out how it’s going to work best for you.
Now, you should have an image that looks like this:
Example of the DIV bubble background.
Next we need to setup our CSS rules. Because we have a box with all four rounded corners, there’s no need to create or load a second image for our borders, but rather set it up like this:
[code lang=”css”]
#bubble_wrap {
width: 580px;
display: block;
}
#bubble_top {
display: block;
margin: 0px;
height: 20px;
background-image: url(/wp-content/themes/akitsu_home/img/feature_bubble.gif);
background-repeat: no-repeat;
background-position: top;
}
#bubble_bottom {
display: block;
clear:both;
margin: 0px;
height: 20px;
background-image: url(/wp-content/themes/akitsu_home/img/feature_bubble.gif);
background-repeat: no-repeat;
background-position: bottom;
}
#bubble_center {
display: block;
}[/code]
We can then assemble the pieces like this:
[code lang=”html”]
<div id="bubble_wrap">
<div id="bubble_top"></div>
<div id="bubble_center">
<p>content goes here</p></div>
<div id="bubble_bottom"></div>
</div>[/code]
