Here is one method of creating boxes with rounded corners / borders using CSS, without using the border-radius capabilities of CSS 5 (so it will work on older browsers).
Features
- Fluid / liquid i.e. allows unlimited expansion horizontally and vertically.
- Supports transparency.
Tested on the following browsers
- IE 6 and 7.
- Firefox 3.5.
- Chrome 4 and 5.
- Safari 4.
Those browsers were on Windows (XP and Vista), Mac (OSX) and Linux (gentoo, not that is makes any difference), as appropriate.
A hybrid approach
The method is a hybrid of the following two approaches:
- CSS and round corners: Boxes with curves Can’t handle transparency on the corners.
- Even More Rounded Corners With CSS Doesn’t allow unlimited horizontal and vertical expansion as max size restricted by image dimensions.
My hybrid approach handles both of those issues.
The code
The HTML:
<div class="rounded">
<div class="top"><div class="topleft"></div><div class="topcentre"></div><div class="topright"></div></div>
<div class="centre">
<p>CSS rounded borders example</p>
</div>
<div class="bottom"><div class="bottomleft"></div><div class="bottomcentre"></div><div class="bottomright"></div></div>
</div>
The CSS:
body {
background: #7c7c7c;
}
.rounded .top,
.rounded .bottom {
position: relative; /* Relative positioning allows child divs to be absolutely positioned relative to parent. */
height: 7px; /* Necessary for IE6 to trigger hasLayout and prevent contained divs hanging to right. */
overflow: hidden; /* Necessary for IE6 to give correct height. */
}
.rounded .topcentre,
.rounded .topleft,
.rounded .topright,
.rounded .bottomcentre,
.rounded .bottomleft,
.rounded .bottomright {
height: 7px;
}
.rounded .topleft,
.rounded .topright,
.rounded .bottomleft,
.rounded .bottomright {
background-repeat: no-repeat;
position:absolute; /* Absolute positioning allows divs to sit side by side */
left:0px;
top:0px;
}
.rounded .topleft,
.rounded .bottomleft {
background-position: top left;
width: 7px;
}
.rounded .topright,
.rounded .bottomright {
background-position: top right;
width: 100%;
}
.rounded .topleft {
background-image: url('tl.png');
}
.rounded .topright {
background-image: url('tr.png');
}
.rounded .topcentre,
.rounded .bottomcentre {
background-image: url('c.png');
background-repeat: repeat;
margin-left: 7px;
margin-right: 7px;
}
.rounded .bottomleft {
background-image: url('bl.png');
}
.rounded .bottomright {
background-image: url('br.png');
}
.rounded .centre {
padding: 3px 10px 3px 10px;
background: url('c.png');
}
.rounded .centre p {
margin: 0; /* Margin in the centre content could break apart the rounded borders in IE. */
}
We need 5 images to create the rounded borders:
- Top left:
- Top right:
- Centre (yes, there is an image here, it just happens to be tiny and white!):
- Bottom right:
- Botton left:
Working example
Here is a working example using the above code: CSS rounded borders example.