Rounded corner CSS without images
- By Viral Patel on August 6, 2009
- CSS
Lot of webdesigners uses rounded corner tables and divs to display information on the webpage. Not only it looks sleek but also eye appealing.
The problem with coding such DIVs is that there is no standard way of rounding off the corners available in CSS (till now). Designers overcome this problem by using corner images to display around a DIV to make it look rounded. But this approach is not always advisable as it makes the code tedious.
There are lot of code snippets around to create rounded corner DIVs using images. But here is a simple CSS technique of rounding off the corners of the DIV using some css attributes. This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.
Add following CSS attributes to your element to make its corner round.
selector {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
To make only Top Left corner rounded, use following CSS.
selector {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
Similarly use topleft, top-left, bottom-right, bottomright etc for rounding off the corners of the DIV.
View Demo
Get our Articles via Email. Enter your email address.
So it looks like your examples are images, instead of rendering the actual rounded corners. What does this look like when rendered in IE. You should put a link to an example page so users can quickly view in different browsers.
Yep it does exactly seem encouraging when your examples are ALL images
ok now checked this !
works exactly as expected !
that is it DOES NOT work in IE
ok just checked it out
as suspected does not work in IE
@Brandon: Thanks for the comment. I have added the Demo link at the end.
@John: I have already mentioned that this technique will works only in CSS3-compatible browser and will not work in Internet Explorer. Also have added Demo page link so that you can check this in different browser.
Guys do you know when gonna decide Microsoft that IE will use CSS3?
A great tutorial, i would deffinately use this if IE accepted it as well, IE is so frustrating to work with!
@Liam, Although being most used browser, IE some how is frustrating for web developers :).. I have always a hard time keeping things compatible with IE..
This script is not working on IE(Internet Explorer)
This script is not working on IE(Internet Explorer). Plz keep a script for IE.
@ all : Claims IE compatibility : http://code.google.com/p/curved-corner/
These scripts aren’t supposed to work for IE. They’re using CSS extensions specific to Webkit and Gecko. They aren’t official CSS standards.
hey can you help me about the javascript .. coz im realy suck to understand about java..help me guys.. i dont know how to perform all the codes and how to execute some codes
.. for browser compatible rounded corner visit this page : http://ashko.blogspot.com/2008/05/just-simple-css-code-of-7-lines-for.html
Try this! with transparent gif for rounded corners effect.
Corner without images
body{padding: 20px;background-color:#00CC00;} b.r1 img{width: 3px; height:1px; background-color:#00CC00; float:left; position:relative; top: 0px; left:0px;} b.r2 img{width: 2px; height:1px; background-color:#00CC00; float:left; position:relative; top: 1px; left:-3px;} b.r3 img{width: 1px; height:1px; background-color:#00CC00; float:left; position:relative; top: 2px; left:-5px;} b.r33 img{width: 1px; height:1px; background-color:#00CC00; float:left; position:relative; top: 3px; left:-6px;} b.r4 img{width: 3px; height:1px; background-color:#00CC00; float:right; position:relative; top: 0px; right:0px} b.r5 img{width: 2px; height:1px; background-color:#00CC00; float:right; position:relative; top: 1px; right:-3px} b.r6 img{width: 1px; height:1px; background-color:#00CC00; float:right; position:relative; top: 2px; right:-5px} b.r66 img{width: 1px; height:1px; background-color:#00CC00; float:right; position:relative; top: 3px; right:-6px}