CSS rounded corners with transparent corner

Joined:
02/21/2009: Posts:
49

October 11, 2009 21:15:53 Last update: October 11, 2009 21:19:39

Many techniques for making rounded corners do not work well when the element being rounded is displayed on a background with a different color (or multiple colors).

Example 1: Nifty Cube with JavaScript

<html>
<head>
	<base href="http://www.html.it/articoli/niftycube/"/>
	<style type="text/css">
		body {
			background: url(file:///C:/images/background.png) repeat-x;
		}

		#content {
			margin: 20px;
			margin-top: 40px;
			background: #42424B;
			color: #FFF;
			padding: 20px;
			width: 150px;
		}

		#content h1 {
			font: lighter 150% "Trebuchet MS",Arial sans-serif;
			color: #208BE1;
		}
	</style>
	<script type="text/javascript" src="niftycube.js"></script>
	<script type="text/javascript">
		NiftyLoad = function() {
			Nifty("div#content", "big");
		}
	</script>
</head>
<body>
	<div id="content">
		<h1>Nifty Cube</h1>
	</div>
</body>
</html>

Example 2: modx Simple Rounded Corner Box

<html>
<head>
	<title>Round Corner</title>
	<style type="text/css">
		 body {
			background: url(file:///C:/images/background.png) repeat-x;
			font-family: verdana,sans-serif;
		}

/* set the image to use and establish the lower-right position */ 
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 { 
	background: transparent url(demobox.png) no-repeat bottom right; 
} 

.cssbox { 
	/* intended total box width - padding-right(next) */ 
	width: 335px !important; 

	/* IE Win = width - padding */ 
	width: 320px; 

	/* the gap on the right edge of the image (not content padding) */ 
	padding-right: 15px; 

	/* use to position the box */ 
	margin: 20px auto; 
} 

/* set the top-right image */ 
.cssbox_head { 
	background-position: top right; 
	
	/* pull the right image over on top of border */ 
	margin-right: -15px; 

	/* right-image-gap + right-inside padding */ 
	padding-right: 40px; 
} 

/* set the top-left image */ 
.cssbox_head h2 { 
	background-position: top left; 
	margin: 0; /* reset main site styles*/ 
	border: 0; /* ditto */ 

	/* padding-left = image gap + interior padding ... no padding-right */ 
	padding: 25px 0 15px 40px; 
	height: auto !important; 
	height: 1%; /* IE Holly Hack */ 
} 

/* set the lower-left corner image */ 
.cssbox_body { 
	background-position: bottom left; 
	margin-right: 25px; /* interior-padding right */ 
	padding: 15px 0 15px 40px; /* mirror .cssbox_head right/left */ 
} 

	</style>
</head>
<body>
<div class="cssbox">  
	<div class="cssbox_head">
		<h2>This is a header</h2>
	</div>  
	
	<div class="cssbox_body">  
		<p>This is for your content.</p>  
	</div> 
</div> 
</body>
</html>

Example 3: CSS3 (does not work in IE)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS3 Image Border</title>
<style type="text/css">
body {
	background: url(./background.png) repeat-x;
}

div#box{
	width: 18em;
	padding: 10px;
	margin:0 auto;
    background:#FFF;
	color:#666;

	/* Firefox recognizes this */
	-moz-border-image: url('round-corner3.png') 12 round;

	/* Google Chrome recognizes this */
	-webkit-border-image: url('round-corner3.png') 12 round;

	/* CSS3 spec, I don't know which browser recognize this */
	border-image: url('round-corner3.png') 12 round;

	border: 12px double orange;
}
</style>
</head>

<body>
	<div id="box">
	<h1>CSS3 Round Corner with Image Border</h1>
	<p>No tricks, just a border image.</p>
	</div>
</body>
</html>

Example 4: This is one that actually works! The nifty corner technique can be tweaked to be background friendly, although the JavaScript version didn't work for some reason.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<body>
		<style type="text/css">
			body {
				background: url(./background.png) repeat-x;
				font-family: verdana,sans-serif;
			}

			.modbox {
				margin: 0 0 12px 12px;
				border: medium none;
				display: block;
				width: 120px;
			}

			.rnd1,.rnd2,.rnd3 {
				border-style: solid;
				border-width: 0;
				display: block;
				font-size: 1px;
				height: 1px;
				line-height: 1px;
				overflow: hidden; /* important, without this IE6 displays 2px height */
			}
			
			.rnd_modtitle .rnd2,.rnd_modtitle .rnd3 {
				background: #D4E6FC none repeat scroll 0 50%; 
				border-color: #BDCAD8;
			}

			.rnd_modboxin .rnd2,.rnd_modboxin .rnd3 {
				background: #FFF none repeat scroll 0 50%;
				border-color: #BDCAD8;
			}

			.rnd1 {
				background: #BDCAD8 none repeat 0 50%;
				margin: 0 4px;
			}

			.rnd2 {
				border-width: 0 2px;
				margin: 0 2px;
			}

			.rnd3 {
				border-width: 0 1px;
				height: 2px;
				margin: 0 1px;
			}

			.modtitle {
				background: #D4E6FC none repeat scroll 0 0;
				border-color: #BDCAD8;
				border-style: none solid;
				border-width: 1px 1px medium;
				font-size: 12px;
				font-weight: bold;
				line-height: 19px;
				padding: 0 7px 2px !important;
			}

			.modboxin {
				background: #FFF none repeat scroll 0 50%;
				padding: 5px 9px 7px !important;
				border: 1px solid #BDCAD8;
				border-bottom: none;
				clear: both;
				overflow: hidden;
				font-size: 11px;
				margin:0;
			}
		</style>

		<div class="modbox" style="margin-top:50px;">
			<b class="rnd_modtitle">
				<b class="rnd1"></b>
				<b class="rnd2"></b>
				<b class="rnd3"></b>
			</b>

			<div class="modtitle">
				The Title
			</div>

			<div class="modboxin">
				The Content
			</div>

			<b class="rnd_modboxin">
				<b class="rnd3"></b> 
				<b class="rnd2"></b>
				<b class="rnd1"></b>
			</b>		
		</div>
	</body>
</html>

[ Comment | Tags ]

Ξ Notes

CSS rounded corners with transparent corner

Related Notes