Home › Yet another way to make round corners with CSS/JavaScript

Yet another way to make round corners with CSS/JavaScript 

James
Joined:
02/21/2009
Posts:
58

July 19, 2009 23:29:42    Last update: July 19, 2009 23:33:24
Existing techniques use background images to make round corners. I present a technique here that uses four foreground images: .

I think this technique is easier to understand and use. The only requirements are:
  1. Add position: relative to the CSS for the box to be rounded
  2. Matching border and color between the box to be rounded and the corner images


Here's the HTML with static elements: 
<!doctype html public '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
	<title>Round Corner Test</title>
	<style type="text/css">
		body {
			font-family: sans-serif;
		}

		#container {
			border: #BDCAD8 1px solid;
			height: 300px;
			width: 33%;
			position: relative;
		}

		#header {
			border: #BDCAD8 1px solid;
			margin: -1px -1px 0 -1px;
			padding: 4px;
			background-color: #D4E6FC;
			color: #3366CC;
			font-weight: bold;
		}

		#content {
			color: #666;
			font-size: 0.85em;
			padding: 4px;
		}
	</style>
</head>

<body>
	<div id="container">
		<div id="header">
			The Header
		</div>
		<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.
		</div>
		<img src="top-left.png" style="display:block;position:absolute;top:-2px;left:-2px;border:0;padding:0;"/>
		<img src="top-right.png" style="display:block;position:absolute;top:-2px;right:-2px;border:0;padding:0;"/>
		<img src="bottom-left.png" style="display:block;position:absolute;bottom:-2px;left:-2px;border:0;padding:0;"/>
		<img src="bottom-right.png" style="display:block;position:absolute;bottom:-2px;right:-2px;border:0;padding:0;"/>
	</div>
</body>
</html>


The markup is even easier if we use jQuery to add the corners dynamically: 
<!doctype html public '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>Round Corner Test</title>

<style type="text/css">
body {
	font-family: sans-serif;
}

#container {
	border: #BDCAD8 1px solid;
	height: 300px;
	width: 33%;
	position: relative;
}

#header {
	border: #BDCAD8 1px solid;
	margin: -1px -1px 0 -1px;
	padding: 4px;
	background-color: #D4E6FC;
	color: #3366CC;
	font-weight: bold;
}

#content {
	color: #666;
	font-size: 0.85em;
	padding: 4px;
}
</style>

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".round").each(function() {
		var tl = document.createElement('IMG');
		tl.src = 'top-left.png';
		tl.style.cssText = 'display:block;position:absolute;top:-2px;left:-2px;border:0;padding:0;';
		this.appendChild(tl);

		var tr = document.createElement('IMG');
		tr.src = 'top-right.png';
		tr.style.cssText = 'display:block;position:absolute;top:-2px;right:-2px;border:0;padding:0;';
		this.appendChild(tr);

		var bl = document.createElement('IMG');
		bl.src = 'bottom-left.png';
		bl.style.cssText = 'display:block;position:absolute;bottom:-2px;left:-2px;border:0;padding:0;';
		this.appendChild(bl);

		var br = document.createElement('IMG');
		br.src = 'bottom-right.png';
		br.style.cssText = 'display:block;position:absolute;bottom:-2px;right:-2px;border:0;padding:0;';
		this.appendChild(br);
	});
});
</script>
</head>

<body>
	<div id="container" class="round">
		<div id="header">
			The Header
		</div>
		<div id="content">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
		incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
		nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
		fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
		culpa qui officia deserunt mollit anim id est laborum.
		</div>
	</div>
</body>
</html>


This is the result:
[ Comment  | Tags ]
 

Related Notes