Articles
  • CSS

CSS Rounded Corners: Using Only a Circle

Background: How I stumbled across it.

Rectangles with rounded corners seem to be popular on the web. To prove my point, I quickly pulled up a list of the top websites and looked at their home pages. Half of the top 10 sites had rectangles with rounded corners either in advertisements, around navigation, or highlighting products. Nearly all of them were boring static images. Some sites used an image for each corner, some used one for the top and one for the bottom, and others used one great big bandwidth wasting image.

Then for kicks I happened to right-click a rounded corner on Technorati, and I was face to face with this image:

Technorati's Circle

Someone had used a circle with a transparent center to create the rounded corners of the rectangle. The image is small (20 x 20 pixels), easier to manage than multiple images (usually one for each corner), and the transparent middle allows gradients to be used for the backgrounds.

Awed and dumbstruck with what I had found, I quickly realized what the clever web designer had done and then quickly set off to mimic what I had just uncovered. I am uncertain whether this trick will work for all browsers, but I can't imagine Technorati would steer us too far off of the path to browser harmony.

Step 1: Create a circle with a transparent center.

Note: The following instructions are for Photoshop 6.0, but the steps involved should be similar for other programs.

Create a new image. Set the dimensions of the image to be 20 pixels by 20 pixels. Then fill the image with the same background color that the rounded rectangle will appear on. (In this case, white.)

New image with white background

Using the eliptical marquee tool, create a circle that fits neatly inside the image. Select the color that will be used for the border of your rectangle, and fill the circle in. (For best results, make sure the edges are anti-aliased.)

Image with a blue filled circle

Using the magic wand tool, select the center of the filled circle. (I used a tolerance value of 16.) Now shrink the selection by 1 pixel. (Menu: Select > Modify > Contract...) Shrinking the selection will insure we have an actual border for the rounded corners.

Zoomed in image to show selection

Press delete to remove the pixels. (Please note you may need to copy the image to a new layer before you are allowed to delete pixels.) This should leave the center of the image transparent. Save the image using the ".gif" format, making sure "Transparency" is checked.

Image of blue circle with transparent center

Step 2: Write the HTML for the rounded rectangle.

The HTML consists of three sections surrounded by a containing element. But it's actually easier for me to show you the markup than to describe it. 

<div class="blueRect">
	<div class="top">
		<div class="cn tl"></div>
		<div class="cn tr"></div>
	</div>
	<div class="middle">
		[Insert rectangle content here]
	</div>
	<div class="bottom">
		<div class="cn bl"></div>
		<div class="cn br"></div>
	</div>
</div>

The containing "blueRect" <div> tag will be used to apply a fill and to select the proper corner image for the rectangle. The "top" <div> tag contains placeholders for the top-left and top-right corners. Similarly the bottom <div> tag contains placeholders for the bottom-left and bottom-right corners. The middle <div> tag is where the actual content of the rectangle will be placed.

Step 3: Write the CSS for the rounded rectangle.

The CSS that creates the rounded rectangle is actually not too complex. Take a look for yourself. 

.blueRect {
	background-color: #BFC6FF;
	background-image: url(rounded_blue_bg.gif);
	background-repeat: repeat-x;
	border: solid 1px #2424B3;
	border-bottom: none;
	color: #000;
	width: 400px;
}
.blueRect .bottom {
	border-bottom: solid 1px #2424B3;
	height: 10px;
}
.blueRect .middle {
	margin: 10px 12px 0px 12px;
}
.blueRect .cn {
	background-image: url(rounded_blue_circle.gif);
	background-repeat: no-repeat;
	height: 10px;
	line-height: 10px;
	position: relative;
	width: 10px;
}
.blueRect .tl {
	background-position: top left;
	float: left;
	margin: -2px 0px 0px -2px;
}
.blueRect .tr {
	background-position: top right;
	float: right;
	margin: -2px -2px 0px 0px;
}
.blueRect .bl {
	background-position: bottom left;
	float: left;
	margin: 2px 0px -2px -2px;
}
.blueRect .br {
	background-position: bottom right;
	float: right;
	margin: 2px -2px -2px 0px;
}

Well... maybe it's a little scary and complex. The "blueRect" class specifies the border, text color, width, fill color and/or image to use for the rectangle. The transparent middle of the circle we created above will allow the fill color or image to be shown. In this example, the following fill image will be used.

Fill image for the rectangle background 

.blueRect .cn {
	background-image: url(rounded_blue_circle.gif);
	background-repeat: no-repeat;
	height: 10px;
	line-height: 10px;
	position: relative;
	width: 10px;
}

The "cn" class is used to specify the corner image we wish to use for our rectangle. Half the actual height and width of the image are specified so that only one quarter of the image is used for the actual corner. Essentially we're dividing the circle into four equal pieces, and one piece will be used for each corner. 

.blueRect .tl {
	background-position: top left;
	float: left;
	margin: -2px 0px 0px -2px;
}
.blueRect .tr {
	background-position: top right;
	float: right;
	margin: -2px -2px 0px 0px;
}
.blueRect .bl {
	background-position: bottom left;
	float: left;
	margin: 2px 0px -2px -2px;
}
.blueRect .br {
	background-position: bottom right;
	float: right;
	margin: 2px -2px -2px 0px;
}

The "tl", "tr", "bl" and "br" classes are used for the top-left, top-right, bottom-left, and bottom-right corners of the rectangle, respectively. The corners are floated to the left or right side of the <div> tag, and the correct "corner" of the circle is selected using the "background-position" attribute. The margins need to be adjusted slightly to mask the border that surrounds the containing "blueRect" <div> tag. (The actual width of the margins may need to be tweaked a little to fit your own HTML.) 

.blueRect .bottom {
	border-bottom: solid 1px #2424B3;
	height: 10px;
}
.blueRect .middle {
	margin: 10px 12px 0px 12px;
}

The "bottom" class provides the containing "blueRect" <div> tag with a bottom border, and the "middle" class merely provides padding for content of the rectangle. (Without the padding the content will squish up against the left and right sides of the rectangle.)

Conclusion: The final product.

All of this combined together results in the following end product.

 
 
Lorem ipsum te pro soleat quaeque adolescens, nullam sanctus eam ei. Quo numquam detracto ut, sea stet prima ex. Qui puto dolore scripta ex, per ne quando deleniti partiendo. Ad nam praesent appellantur. Duo eros quaestio voluptatum ea.
 
 

That's it! You now have enough knowledge to start making little rounded rectangles of your own.