For those of you who just want to see the code: Rounded corners with background-images and Rounded corners using border-radius. Some parts of the code below are pseudo code.
Before CSS3
Often the websites I build for clients include rounded corners in the design. Prior to CSS3, creating rounded corners ( without JavaScript ) in any browser required creating and slicing up images to be used with html elements and the css property, background-image. How many images need to be cut? How many elements do we need in our HTML mark-up to properly display the background-image? Other than background-image, what CSS properties are required to display the background-images? Those answers depends on whether you require the content to be able to expand and contract, or whether the height and width are fixed.
E.g., Rounded corners for the chrome of a webpage might need three background images and three HTML divs – div#top, div#center (repeating vertically), and div#bottom. Repeating the center background image allows for content of varying length. If you have a fixed height and width then you can cut a single background-image.
To boot, IE6 does not include native support for PNG images. So if your rounded corners required transparency, you needed separate background images and CSS rules to specify GIFs for IE6 and PNGs for IE7+ and other browsers. In order to apply rules specifically to IE6, you need detect the browser on the server side, use Microsoft proprietary conditional comments for Internet Explorer, or javascript. Alternatively, you can use the proprietary Microsoft filtering code to add support for transparent PNGs in IE6. Either way it requires adding browser specific CSS, which is generally undesirable but sometimes unavoidable. Below is an example of adding the conditional wrapper div for IE6, which is used primarily for targeting your CSS as well as using different background images between IE6 and > IE6. Also shown is the conditional div for generating the additional markup required for the background images.
Rounded Corners with background-images
Your CSS for IE browsers would be something like:
/* IE Browsers: #box_bottom */
.ie6 #box_bottom,
.ie7 #box_bottom,
.ie8 #box_bottom {
background:url("images/bottom.gif") no-repeat bottom left;
width:420px;
height:300px;
padding-bottom:18px;
}
/* For IE7 and IE8, height:auto */
/* IE7+ Use PNG */
.ie7 #box_bottom,
.ie8 #box_bottom {
height:auto;
background:url("images/bottom.png") no-repeat bottom left;
}
/* IE Browsers, #box */
.ie6 #box,
.ie7 #box,
.ie8 #box {
background:url("images/top.gif") no-repeat top left;
width:420px;
height:300px;
padding-top:18px;
}
/* IE7+ Use PNG */
.ie7 #box,
.ie8 #box {
background:url("images/top.png") no-repeat top left;
}
/* IE Browsers, #box textarea */
.ie6 #box textarea,
.ie7 #box textarea,
.ie8 #box textarea {
width:400px;
height:300px;
padding:0px 10px;
overflow:auto;
background-color:#FFF;
background:url("images/mid.gif") repeat-y;
text-align:justified;
}
/* IE7+ Use PNG. */
.ie7 #box textarea,
.ie8 #box textarea {
background:url("images/mid.png") repeat-y center center;
}
And that’s just the CSS for IE! You might need something different to get rounded corners with background-images working in Firefox, Safari, Chrome, and Opera.
Rounded Corners using CSS3 border-radius
To the rescue came the CSS3 property, border-radius. Border-radius allowed web developers and designers to easily create rounded corners simply by declaring the “border-radius:” property and specifying a value. *The property to be declared actually depends on your browser, and I will get into that later when I show you the code. Currently, the CSS3 border-radius property is supported by recent versions of major browsers such as Firefox (Gecko), Safari (Webkit), Google Chrome (Webkit), and Opera (Presto). However, Internet Explorer versions 6-8 do not support border-radius. For me, the decision on whether to support IE at all, and if so which versions, depends on the project.
/* styles for all browsers except the IEs, which won't support border radius until IE9 */
#box textarea {
padding:5px;
border:none;
color:#FFF;
width:420px;
min-height:300px;
background-color:#00bfff;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
/* For opera and hopefully other browsers in the future */
border-radius:5px 5px 5px 5px;
}
Using the border-radius property gives us rounded corners in almost all the popular browsers, while requiring less html mark-up and fewer CSS rules. If you need to support Internet Explorer, you can use the border-radius approach in combination with background-images. Working demo here.
