CSS/JavaScript Rounded Corners Roundup 

Joined:
02/21/2009
Posts:
158

July 19, 2009 20:51:23    Last update: January 11, 2011 20:14:18
If CSS3 border-image is properly supported, making a rounded corner box is very easy. You just need a round corner image like this:

The following markup:
<!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">
div#box{
	width: 18em;
	padding: 10px;
	margin:0 auto;
        background:#FFF;
	color:#666;

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

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

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

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

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

would render like this (try it in Firefox 3.5 and Google Chrome):


However, IE as of version 8.0 does not support border-image. So until border-image is reliably supported in all major browsers, we still have to rely on tried and true tricks to make it work. In general, I found three general categories of tricks to make rounded corners:
  1. Good old tables. This trick creates a table of 9 cells and uses the 8 cells on the perimeter to render the borders and rounded corners. The central cell is used for the contents. Of course, tables are evil (according the CSS zealots).

    Evil part aside, the fact that only 1 out of 9 cells holds useful content does seem to be a big waste (and clutter). However, if you are using server side technologies like JSP, you can create a custom tag to make this more manageable.

    Example (http://clipmarks.com):


    Turn on table border makes it clearer:


  2. Background images.
    Sliding door technique: http://www.alistapart.com/articles/slidingdoors/
    Mountaintop corners: http://www.alistapart.com/articles/mountaintop/

    Since you can only use one background image per element, you usually can't make a single standalone DIV (without nested inner elements) round-cornered. For example, modx Simple Rounded Corner Box uses four elements for the trick (.cssbox, .cssbox_head, h2, .cssbox_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>
    


  3. Image-less Nifty Corners by Alessandro Fulciniti. This trick uses varied length b elements to achieve the rounded corner effect. Nifty Corners make the job easier by using JavaScript. The widgets in iGoogle home page uses this trick.


    The iGoogle markup is something like this:
    • Code
    • Demo
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<body>
    		<style type="text/css">
    			body {
    				font-family: verdana,sans-serif;
    			}
    
    			.modbox {
    				margin: 0 0 12px 12px;
    				background-color: #FFF;
    				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 {
    				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">
    			<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>
    



P.S. You may want to look at my new creation using foreground corner images.
Share |
| Comment  | Tags