If you’re a web designer, rounded borders will pay your bills. So it’s best to learn how to do them (well).
I like this method because it’s completely fluid (unlimited height and width) and only uses a single image. Here’s how it works.
The Layout
Our layout is fairly straight forward.
Our rounded border block layout
Each of the bars (top and bottom) can be broken up into 3 blocks - middle, left and right. The left and right blocks are our rounded corners.
The Corner Image
Use Photoshop to create a circle with the radius you want for your block’s rounded corners. You can use any stroke and colours you want. We’ll use this circle to represent our corners.
Basic circle
Next merge your image and erase any background colour. This will allow your website’s background to show around your block’s corners. A minor, but important detail. Save the image.
Circle with transparency
The HTML
The HTML for the block is pretty much what you’d expect, given the layout.
<div class="fluid_block">
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
<div class="content">
This is foo
</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
</div>
The Top And Bottom Bar CSS
The bars each consists of 4 divs. A container div which is used for CSS selectors. Nested inside this div are 2 floating divs which represent the left and right corners. There’s also a middle div which we use to create the straight border.
Here is the CSS for the top bar:
.fluid_block .top .left{
float:left;
width:8px;
height:8px;
background:url(./corner.gif) top left;
}
.fluid_block .top .right{
float:right;
width:8px;
height:8px;
background:url(./corner.gif) top right;
}
.fluid_block .top .middle{
margin:0 8px;
background:#E8F2F8;
border:0px solid #8ABAD8;
border-top-width:1px;
height:7px;
}
The first 2 selectors are our top left and top right corners. We use left and right float styles on these blocks so they’re rendered on either side of our middle block. We give them the height and width of our circle’s radius so only a quarter of the circle is shown. We use background positioning to make sure the correct quarter is shown.
For the middle block, we use a left and right margin equal to our corner blocks’ width. This allows our middle block to slide in between the corner blocks. Its background colour and border join our 2 corners. Remember; borders aren’t included in a div’s height so we give it height of 1px less than our corner blocks’ height.
Repeat the same idea for the bottom bar CSS. Swap every “top” you see in your CSS styles for a “bottom”. The border on the middle block and the background positioning on the left and right corners.
If your output doesn’t look like mine, it probably means you’re using IE6. I’ll get to the fix for that later.
The Content Block CSS
.fluid_block .content{
background:#E8F2F8;
border:0px solid #8ABAD8;
border-width:0 1px;
padding:0 7px;
}
There’s nothing fancy here, just a block with left and right borders. We also use left and right padding to make up for the top bar.
IE6 Fixes
Internet Explorer 6 has the knack of destroying CSS web pages. People still use it though, so we have to deal with it.
The first fix we need to do is a pretty standard IE6 fix. IE6 assumes there is a   in every div. So a div’s height can never be less than its font height. We fix this by setting the font size in the top and bottom bars to 0.
.fluid_block .top div, .fluid_block .bottom div{
font-size:0;
}
Now here’s what our block looks like in IE6.
Our block in IE6
IE6 loses 3px on either side of our middle blocks in our 2 bars. Luckily that 3px is constant, regardless of the block’s size. So there’s an easy fix.
.fluid_block .top .left{
float:left;
/* IE6 Fix */
margin-right:-3px;
width:8px;
height:8px;
background:url(/images/block/corner.gif) top left;
}
.fluid_block .top .right{
float:right;
/* IE6 Fix */
margin-left:-3px;
width:8px;
height:8px;
background:url(/images/block/corner.gif) top right;
}
.fluid_block .top .middle{
/* IE6 Fix */
margin:0 5px;
background:#E8F2F8;
border:0px solid #8ABAD8;
border-top-width:1px;
height:7px;
}
The first thing we do is subtract 3px from the left and right margins of our middle block (in my case taking the margin down from 8px to 5px). This will however break the design with other real browsers. So we take advantage of the fact that IE6 doesn’t understand negative margins. We give a -3px margin to the inward facing edges of each of our corner blocks.
The result; fluid, light weight, cross browser, rounded borders. You can apply the same theory to create some fairly advanced fluid blocks.
Here’s the full source code, along with a slightly more optimised verison.
All rights reserved.