HTML Dog

Skip to navigation

Broader Border Corners

A quick and easy recipe for turning those single-pixel borders that the kids love so much into into something a little less right-angled.

This article was originally published in 24 Ways.

Here's the principle: We have a box with a one-pixel wide border around it. Inside that box is another box that has a little rounded-corner background image sitting snugly in one of its corners. The inner-box is then nudged out a bit so that it's actually sitting on top of the outer box. If it's all done properly, that little background image can mask the hard right angle of the default border of the outer-box, giving the impression that it actually has a rounded corner.

Take An Image, Finely Chopped

Magnified corner example

Add A Sprinkle of Markup


<div id="content">
	<p>Lorem ipsum etc. etc. etc.</p>
</div>

Throw In A Dollop of CSS


#content { 
	border: 1px solid #c03;
}

#content p {
	background: url(corner.gif) top left no-repeat;
	position: relative;
	left: -1px;
	top: -1px;
	padding: 1em;
	margin: 0;
}

Bubblin’ Hot

Et voilà. Bon appétit.

Extra Toppings