Custom Corner Functionality

Perfect Layout provides a simple method of customizing corners on a div box. The idea behind the technique is to have a relatively positioned box, and four corner image boxes that are absolutely positioned within it. Because they are usually PNG, you can take advantage of their partial transparency attributes and create boxes with rounded corners regardless of the box's background. Here's a few examples:

Rounded Corner Box Type 1

You can theoretically have anything inside these boxes.

Ut facilisis massa eget risus. Vestibulum ullamcorper risus quis nibh. Nullam tempus, ante in vulputate iaculis, lorem leo rutrum eros, id mollis nulla quam cursus sem. Suspendisse sed nibh vel metus bibendum vehicula. Nam viverra elementum orci. Curabitur eros. Fusce lacinia eleifend neque. In euismod dolor et lectus. Donec dignissim. Morbi quis erat. Aenean erat. Integer sed mauris dictum libero vehicula ultrices. Sed sed augue.

Aenean dolor nisi, nonummy et, feugiat eget, semper eu, est. Nunc elit. Aliquam erat volutpat. Suspendisse id tortor aliquam leo convallis sodales. Nulla velit tellus, laoreet eu, mattis eleifend, dictum non, purus. Aliquam porttitor egestas velit. Etiam tellus ipsum, pulvinar vitae, varius vitae, mollis a, velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut dolor. Etiam accumsan arcu sed lectus. Proin nulla sapien, accumsan et, molestie non, laoreet non, nibh. Sed lobortis, massa a semper interdum, est felis feugiat nisi, tincidunt venenatis tellus est quis eros. Integer a lectus.

Rounded Corner Box Type 2

My changing only one number, you can quickly have a differently styled rounded box.

Morbi felis metus, ultricies a, laoreet a, vulputate ut, arcu. Quisque at magna. Pellentesque sagittis rutrum sem. Vivamus porta rutrum lacus. Maecenas justo urna, sollicitudin vel, ultrices non, convallis eget, mauris. Curabitur volutpat volutpat neque. Morbi lacinia commodo dolor. Nulla facilisi. Praesent tristique dignissim lacus. Donec id sem ac diam venenatis bibendum. Donec ut felis. Sed at tellus nec nisi adipiscing volutpat. Aliquam tempus odio a justo. Ut gravida malesuada lacus. Sed sodales. Proin in diam vel arcu aliquam pharetra. Curabitur at tortor. Aliquam eu neque.

Internet Explorer 6 can't handle this method, but it should. The next version of Perfect Layout will probably allow IE 6 to correctly use these styles. For now, these types of boxes will look like a regular square box. See the page about IE 6 Overrides for more info.

Relevant HTML

<div class="corners type1">
	<div class="cornersPadding">
		<p>Your content goes inside the cornersPadding class.</p>
		<div class="clearBoth"></div>
	</div>
	<div class="tl"></div><div class="tr"></div><div class="bl"></div><div class="br"></div>
</div>

Relevant CSS

.corners
{
	margin-bottom:1em;
	position:relative;
	clear:both;
}

.cornersPadding
{
	padding:20px;
}

.type1
{
	background:url(../images/highLines.png) #505050;
	color:#fff;
}

.type2
{
	background:url(../images/blueSquares.png) #505050;
	color:#fff;
}

.tl
{
	position:absolute;
	top:0;
	left:0;
	height:18px;
	width:18px;
	background:url(../images/topLeft.png) no-repeat;
}

.tr
{
	position:absolute;
	top:0;
	right:0;
	height:18px;
	width:18px;
	background:url(../images/topRight.png) no-repeat;
}

.bl
{
	position:absolute;
	bottom:0;
	left:0;
	height:18px;
	width:18px;
	background:url(../images/bottomLeft.png) no-repeat;
}

.br
{
	position:absolute;
	bottom:0;
	right:0;
	height:18px;
	width:18px;
	background:url(../images/bottomRight.png) no-repeat;
}

« Back to Functionality Index