Rounded edges on links with pure CSS

Last time I showed how to make reusable rounded edges on block elements. It was a very effective technique, but it had some HTML overhead. Today, I will show how to make rounded edges on any elements using just CSS. Just like my rounded link highlights. But it can be extended onto list elements, headlines and actually, any other element that can be partially block.

This technique is quite easy, based on the post by Arve Bersvendsen. It’s almost lazy compatible, except that it doesn’t work in IE7 — luckily, IE just displays a normal, rectangle highlight. Lets use this blog as an example, and try to make rounded edges on link highlights. First, we need to properly define the a element.

a {
	display: inline-table;
	padding: 0 1pt;

	text-align: left;
	text-decoration: none;
	vertical-align: bottom;
}

The crucial part is display — inline-table is yet another holy grail of CSS, because it lets you have block elements positioned inline. Next important thing is padding, because this technique requires proper horizontal positioning (ensure unit consistency, i.e. don’t mix pixels and points when defining a element). The rest is just for proper rendering.

Next step is to prepare the rounded highlight. Lets start with Firefox, this browser is easy, because it has built-in compatibility for defining rounded borders. So all that you have to do is define the radius of the corner:

a:hover {
	background-color: #00a1f1;
	color: #fff;

	-moz-border-radius: 5px;
}

Along the way, we defined the highlight color. Now, the fun part starts. Using special CSS selectors, we will make the browsers to put something :before and :after our links. This something will be a small white mask, which makes the rounded corner, similarly as we did in the previous article.

a:before,
a:hover:before {
	display: block;
	height: 5px;

	padding: 0;
	margin: -5px -1pt;

	background: url(tr.png) top right no-repeat #00a1f1;
	content: url(tl.png);

	line-height: 0;
	font-size: 0;
}

a:before {
	background: none;
}

The above CSS puts an additional block element above our link. It’s like a div, it starts with the beginning of the first letter in the link text, and ends with the last letter — with a break, in case the link is across more than one line of text. The content attribute is the image of top-left rounded corner. The trick is in the background attribute — we are displaying the other rounded corner as a background image. Notice that horizontal positioning in margin is in points, as mentioned earlier, consistency here is the key. Vertical positioning depends on the size of your corner image, and you should set the same negative margin and block element height, as the height of your rounded corner white patch.

The line-height and font-size values are there to remove element spacing forced by the browsers, while the additional empty background definition is there, so that no elements of the highlight would be visible, when the link is not hovered with the cursor. Similarly, we define the :after element:

a:after,
a:hover:after {
	display: block;
	height: 5px;

	padding: 0;
	margin: -5px -1pt 0 -1pt;

	background: url(br.png) bottom right no-repeat #00a1f1;
	content: url(bl.png);

	line-height: 0;
	font-size: 0;
}

a:after {
	background: none;
}

Horizontal positioning is a bit more tricky in this case, but basically it’s the same as :before. But that is all. Using these CSS definitions, you will get rounded edges on your links, you don’t have to change anything in the HTML, nor add any elements. There’s a slight, vertical glitch in Opera 9, but with proper line-height, it should not be a big problem.

So, just like that, the links have a nice, rounded highlight. Awesome!

UPDATE: And if you quickly want to cover Firefox and Safari (probably Chrome too, as it’s a WebKit thing), just use these two, built-in CSS properties:

-moz-border-radius: 5px; /* for Firefox */
-webkit-border-radius: 5px; /* for Safari */