Rounded Corner CSS

In the new generation of advance CSS we can make rounded corner with the help of CSS. In this method we don’t need any images or javascript to make rounded corner. “border-radius” is the CSS3 syntax. CSS3 properties don’t work in Internet Explorer(IE6,IE7,IE8) but it’s works on IE9. For rounded corner we use “border-radius”. Please see the below example.

rounded corner in css

CSS [CSS3 Browser]

.rounded_corner
{
	background:#fffc00;
	border:3px solid #F00;
	padding:15px;
	color:#000;
	width:350px;
	margin:auto;
	border-radius:12px;
}

HTML

<div class="rounded_corner">&nbsp;</div>

You can use some browser hacks. E.g. For Mozilla we can use “-moz-border-radius“, for Opera we can use “-o-border-radius“, for chrome, Safari we can use “-webkit-border-radius“. -moz-border-radius will only work if you’re using Firefox or another Mozilla browsers. -o-border-radius will only work if you’re using Opera. Please see the below example to use “border-radius” separately for different edges.


Examples of using -moz-border-radius

CSS

.rounded_corner
{
	background:#fffc00;
	border:3px solid #F00;
	padding:15px;
	color:#000;
	width:350px;
	margin:auto;
	-moz-border-radius-topright:5px;
	-moz-border-radius-bottomright:30px;
	-moz-border-radius-bottomleft:10px;
	-moz-border-radius-topleft:30px;
}

HTML

<div class="rounded_corner">&nbsp;</div>

CSS rounded corner with different edge

Examples of using -webkit-border-radius [Work in only Safari and Google Chrome]

CSS

.rounded_corner
{
	background:#fffc00;
	border:3px solid #F00;
	padding:15px;
	color:#000;
	width:350px;
	margin:auto;
        -webkit-border-top-right-radius: 5px; 
	-webkit-border-top-left-radius: 30px;
	-webkit-border-bottom-right-radius: 30px; 
	-webkit-border-bottom-left-radius: 10px;
}

HTML

<div class="rounded_corner">&nbsp;</div>

CSS rounded corner with different edge

VN:F [1.9.22_1171]
Rating: 9.3/10 (20 votes cast)
VN:F [1.9.22_1171]
Rating: +7 (from 7 votes)
Rounded Corner CSS, 9.3 out of 10 based on 20 ratings

This entry was posted in Advanced HTML - CSS. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>