Rounded corners

Rounded corners are one of the most sought-after graphical elements on the web. Hence we have a myriad of implementation with more or less bloated code. The reason is that you need four hooks to attach the four images needed for flexible boxes. With typical box markup of header plus paragraphs/lists, it can be hard to find appropriate elements, especially with outdated and buggy browser implementations.

Once you do away with browser constraints and develop for the best in the field, all the markup is 100% semantic.

<div class="hifi">
<h2>Nice box<a name="anch2">with anchor</a></h2>
<p>And few...</p>
<p>paragraphs. </p>
</div>

div defines the box, h2 defines the header, p defines content and a defines fast-access URL point. Semantic, flexible and good looking. What else to ask for? Apart from browser support, nothing.

CSS is little more than just basics. The background of the whole box is bottom-right corner:

.hifi {
	background: url(hifi/b-r.gif) no-repeat bottom right;
}

Header is the top-left hook. Pay attention that all the following properties are needed. Margin is removed, padding needs to leave some space for the curves and glow. Position is needed so we can precisely position the top-right image while overflow and line-height are there to (hopefully) avoid possible browser surprises.

.hifi h2 {
	background: url(hifi/t-l.gif) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	line-height: 1;
	position: relative;
	overflow: hidden;
}

Then comes the top-right corner, for which the anchor is used, with rules that make it fit nicely.

.hifi h2 a[name] {
	background: url(hifi/t-r.gif) no-repeat top right;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	min-height: 3.5em;
}

Bottom-left corner is applied to the last element in the box, in my case last paragraph:

.hifi p:last-child {
	background: url(hifi/b-l.gif) no-repeat bottom left;
	padding-bottom: 31px;
}

But one thing is missing – the right edge is not “closed”. To avoid the need for one more image, I use the bottom-left corner image again, but this time aligned to the top-left – this works great as long as you make sure that this image is at least 2x higher then largest assumed paragraph width.

.hifi p {
	background: url(hifi/b-l.gif) no-repeat top left;
	margin: 0;
	padding: 0.5em 30px;
}

And there it is. Nice and simple. Before the end, here are the four images used to make this example work.

Top-left:

Top-right:

Bottom-left:

Bottom-right: