How to create divs with rounded corners, using only a lightweight circle graphic and a combination of xHTML/CSS
User login
Thursday, January 27, 2011 - 01:56
* Create a square image depicting a circle, using as a side double the radius of the desired round corners' width(You can do that with any image editor, i.e. mspaint). We 'll use 16px radius for our corners in our example, thus we'll be needing a square image 32x32 pixels depicting a circle(with a radius of 16px obviously), with the same border/backround color combination, as the divs we'll inclose.
i.e. -> 
CSS Code:
body {
background-color: #ffffff; /* Backround color of the page, so that the rounded corner divs single out*/
}
.container {
position: relative;
color: #404040;
background-color: #eeffff;
padding: 16px;
border: 2px #000000 solid; /* A border featuring the same width and color as the one in our image */
}
/* A common class for all the divs we'll be using to separate the 4 different corners(16x16px) of our cirle */
div.corner {
position: absolute;
width: 16px;
height: 16px;
border: 0px;
margin: 0px;
padding: 0px;
background-attachment: scroll;
background-image: url(circle.png);
overflow: hidden;
}
/* Specifying positioning for our four "corners" */
div.top_left {
top: -2px;
left: -2px;
background-position: 0px 0px;
}
div.top_right {
top: -2px;
right: -2px;
background-position: 16px 0px;
}
div.bottom_left {
bottom: -2px;
left: -2px;
background-position: 0px 16px;
}
div.bottom_right {
bottom: -2px;
right: -2px;
background-position: 16px 16px;
}HTML code:
<div class='container'>
<div class='corner top_left'></div>
<div class='corner top_right'></div>
<div class='corner bottom_left'></div>
<div class='corner bottom_right'></div>
Your content here, incircled with a simple xHTML/CSS rounded box ;)
</div>P.S. Ofcourse there is a trade off. These five divs are non semantic at all. But alas, until every user out there uses browsers with full CSS3 capabilities, backround images, nonsemantic code and hacks are pretty much the only way to achieve cross browser compatibility.
Tags:
HTML / CSS