Rounded Corner Boxes

Contact Us or call 1-877-932-8228
Rounded Corner Boxes

Rounded Corner Boxes

There are many different methods of creating rounded-corner boxes using CSS. Most methods use background images and involve extra non-semantic HTML markup. CSS3 has been released and is supported in modern browsers, however; designers who want rounded corners and need to support Internet Explorer 8 and earlier may be forced to compromise on semantic HTML markup. We'll cover some tactics to achieve these effects on older browsers first, then look at how we can accomplish the same things with CSS3 for more modern browsers.

Fixed-width Rounded Corner Boxes

To create a fixed-width rounded-corner box with variable height, you need to use at least two background images, one for the top and one for the bottom, and sometimes a third for the middle. Each image must be the same width as the box, which is usually a div marked up like this:

<div id="box">
	<div class="bgTop"></div>
		<div class="content">
			content goes here
		</div>
	<div class="bgBottom"></div>
</div>

Our first example, CssBackgroundTricks/Demos/FixedRoundCornerBox1.html, uses images to cap the top and bottom of a container. It uses the CSS border property for the left and right borders.

The background images, which are 9 pixels high by 660 pixels wide, are shown below: Background Images Second Background Images

And here is the result in the browser with the CSS shown in the box itself: Browser Result

To make it easier to see what's going on, in the screenshot below we've added a dashed border around the divs using this code:

div { border:1px dashed #f00; }

The result: Fixed Round Corner Box with Dashed Border

In the next example, the HTML markup is the same, but this one uses a background image instead of the border property to style the left and right edges of the container. We cannot use the border property because the border here is fancier than any options provided by CSS.

The images used are shown below: Top Image Middle Image Bottom Image

And here is the result in the browser with the CSS shown in the box itself: Fixed Corner Box

And here it is with the dashed border to show how the sections are broken out: Fixed Corner Box with Dashed Border

Flexible-width Rounded Corner Boxes

Creating rounded corner boxes with flexible widths is more complicated because images have fixed widths. Instead of using images to cap the top and bottom, we use an image for each corner. The markup looks like this:

<div id="box">
	<span class="topLeft bg"></span>
	<span class="topRight bg"></span>
	<span class="bottomLeft bg"></span>
	<span class="bottomRight bg"></span>
	<div class="content">content goes here</div>	
</div>

Notice that we have assigned two classes to each of the span tags: one to capture its position (e.g., topLeft) and the other to indicate that it is a background (bg).

We could use four separate images; however, by taking advantage of background positioning, we can accomplish this with just a single image (magnified below): Magnified Image

The checkered portion of this image is transparent. Each corner of the image shown will serve as the background for the analogous corner of our box. Here's the code:

Code Sample:

CssBackgroundTricks/Demos/FlexibleRoundCornerBox.html
---- C O D E   O M I T T E D ----
<style type="text/css">
body {
	margin:10px;
	font: 1.2em/1.1 Courier;
	color:#000;
}
#box {
	margin:10px;
	position:relative;
	height:1%;
}
#box .bg {
	position:absolute;
	height: 12px;
	width: 12px;
	background: #fff url(Images/blueCircle.gif) no-repeat;
}
#box .topLeft {
	top:0px;
	left:0px;
	background-position:top left;
}
#box .topRight {
	top:0px;
	right:0px;
	background-position:top right;
}
#box .bottomLeft {
	bottom:0px;
	left:0px;
	background-position:bottom left;
}
#box .bottomRight {
	bottom:0px;
	right:0px;
	background-position:bottom right;
}
#box .content {
	border:4px solid #00f;
	padding:20px 30px;
}
</style>
<title>Flexible-width Rounded Corner Boxes</title>
</head>
<body>
<div id="box">
	<span class="topLeft bg"><!--for IE6--></span>
	<span class="topRight bg"><!--for IE6--></span>
	<span class="bottomLeft bg"><!--for IE6--></span>
	<span class="bottomRight bg"><!--for IE6--></span>
	<div class="content">
	content goes here
	content goes here
	content goes here
	content goes here
	content goes here
	content goes here
	content goes here
	content goes here
	content goes here
	content goes here
	</div>
</div>
</body>
</html>

Code Explanation

Things to notice:

  • The box itself gets relative positioning. That's so we can position the spans absolutely within it.
  • Each span, via its bg class, has the following properties:
    position:absolute;
    height: 12px;
    width: 12px;
    background: #fff url(Images/blueCircle.gif) no-repeat;
    This will turn them into positionable 12 pixel squares with a background. If we were to change the height and width to 50 pixels, the box would look like this: Flex Round Corner Box
  • Each span is then positioned within the box and the background image is positioned so that the appropriate corner is revealed.
  • We put a 4-pixel blue border on the "content" div to meet up with the four corners.
  • We add a height: 1% declaration to our rule for #box. This is necessary for Internet Explorer to render the box correctly.

Here the result shown with two different widths: Two Different Widths Second Round Corner Box

Rounded Corners with CSS3

With the advent of CSS3 - and better support for newer CSS3's techniques among most browsers - we can accomplish the same rounded-corner effect much more easily. While most modern browsers now support CSS3, it's always the case that your use of CSS3 should be dictated by the audience you expect for your pages: folks using older version of browsers won't always see the same results.

CSS3's border-radius property let's us set the radius - in pixels, ems, or any other valid CSS length unit, or as a percentage of the parent - of any element:

div.rounded {
	border-radius:20px;
}

The code above would set rounded corners, with a radius of 25px, for any div of class rounded. The border-radius property is actually shorthand for setting the radius of each of the four corners of an element; as such, we might also write:

div.rounded {
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
	border-bottom-left-radius:20px;
}

We could, of course, give each corner a different radius:

div.rounded {
	border-top-left-radius:2em;
	border-top-right-radius:10px;
	border-bottom-right-radius:30px;
	border-bottom-left-radius:2.4em;
}

We can combine the specification of each corner into the shorthand version of the border-radius property, where the values are top-left, top-right, bottom-right, bottom-left, from first to last respectively. The following sample is the same as the previous code sample:

div.rounded {
	border-radius:2em 10px 30px 2.4em;
}

Code Sample:

CssBackgroundTricks/Demos/BorderRadius.html

Code Explanation

Open up CssBackgroundTricks/Demos/BorderRadius.html in a browser to view the results and in a code editor to check out the code. Our example presents two boxes with rounded corners:

Border Radius

The first div, with id #box1, has a red background; it's rounded corners (all with the same radius) result from the statement border-radius:25px;.

The second div, with id #box2, has a yellow background. We set it's top-right and lower-left corners to be really rounded, with a radius of 140px. Those corners, along with a border-radius of 10px for the top-left corner and 30px for the lower-right corner, makes the element look roughly like a lemon!

Mountaintop Corners

In an A List Part article, Dan Cederholm introduced another way to create rounded corners, which he dubbed "Mountaintop Corners."

The idea is similar to the last example, but doesn't involve using borders on the box. Instead, you cover the corners of the box with a concave image of the same color as the background leaving the concave portion transparent. You could use four images like this:

First Image Second Image

Third Image Fourth Image

But we can put these all together and use just a single image like this:

Single Image

As you can see, it looks like a hole; we named it hole.gif in the Demos/Images folder. That image is 18x18 pixels, so each corner is 9x9 pixels as you can see in the diagram below: Diagram

One nice feature about this method is that you can freely style the boxes without considering the color of the border or the rounded corners. The screenshot below shows the output for two boxes with different background colors: Two Boxes with Different Background Colors

And here is the code:

Code Sample:

CssBackgroundTricks/Demos/mountaintop.html
---- C O D E   O M I T T E D ----
<style type="text/css">
body {
	margin:10px;
	font: 1.2em/1.1;
	color:#000;
	background:#fff;
}
h1 {
	font-size:1.2em;	
	padding:5px 10px;
}
.box {
	margin:10px;
	position:relative;
	height:1%;
}
.box .bg {
	position:absolute;
	height: 9px;
	width: 9px;
	background: transparent url('Images/hole.gif') no-repeat;
	border:1px solid red;
}
.box .topLeft {
	top:-1px;
	left:-1px;
	background-position:top left;
}
.box .topRight {
	top:-1px;
	right:-1px;
	background-position:top right;
}
.box .bottomLeft {
	bottom:-1px;
	left:-1px;
	background-position:bottom left;
}
.box .bottomRight {
	bottom:-1px;
	right:-1px;
	background-position:bottom right;
}
#box1 .content {
	padding:20px 30px;
	background:#ff0;
}
#box1 h1 {
	background:#ccc;
}
#box2 .content {
	padding:20px 30px;
	background:#0ff;
}
#box2 h1 {
	background:#faa;
}
</style>
<title>Mountaintop Boxes</title>
</head>
<body>
<div class="box" id="box1">
	<span class="topLeft bg"><!--for IE6--></span>
	<span class="topRight bg"><!--for IE6--></span>
	<span class="bottomLeft bg"><!--for IE6--></span>
	<span class="bottomRight bg"><!--for IE6--></span>
	<h1>Box 1</h1>
	<div class="content">
	content goes here
	</div>	
</div>
<div class="box" id="box2">
	<span class="topLeft bg"><!--for IE6--></span>
	<span class="topRight bg"><!--for IE6--></span>
	<span class="bottomLeft bg"><!--for IE6--></span>
	<span class="bottomRight bg"><!--for IE6--></span>
	<h1>Box 2</h1>
	<div class="content">
	content goes here
	</div>	
</div>
</body>
</html>

Code Explanation

Things to notice:

  • The HTML code is very similar to what we saw in the previous example. We've used ids to identify the two different boxes and we have added h1 elements above the "content" div.
  • We have added background colors to the h1 and "content" div.

Below is a shot of the top box with the corners outlined, which we did by adding this CSS code: span { border:1px dashed red}. Top Box with Corners Outlined

There are other ways of creating boxes with rounded corners. For a slew of different methods, see http://cssjuice.com/.

Next