Easy CSS Rounded Corners

Posted by _R on August 28, 2012 in CSS, Tutorials

I remember the days when I used to slice the corners of an image one by one to use them for the round corners of menus and containers of layouts I code.

My code would look something like this:

CSS
.wrap {
background-color: #a410cf;
background-image: url(images/corner1.gif);
background-repeat: no-repeat;
background-position: top left;
width:500px; height:200px;
}
.wrap2 {
background-color: none;
background-image: url(images/corner2.gif);
background-repeat: no-repeat;
background-position: top right;
width:500px; height:200px;
}

HTML
<div class=”wrap”>
<div class=”wrap2″><strong>Old school rounded corners over here!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod magna ut tellus scelerisque sit amet fermentum massa bibendum. Donec tortor lorem, commodo non fermentum varius, ultricies eu nisl. Praesent eu ligula vel turpis tempus luctus ut ut risus.</div>
</div>

 

As tedious as this was, there wasn’t much choice back then. For every round corner, there would be a container and/or an image positioned on that corner.

So, say hello to CSS3’s rounded corners via border-radius making our lives easy and lovely.

CSS
round{
background: url(images/brushed_alu_dark.png) repeat-x top center;
width:400px; height:200px;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
float:right;
}

 

HTML
<div class=”round”><strong>CSS3 rounded corners, y’all!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod magna ut tellus scelerisque sit amet fermentum massa bibendum. Donec tortor lorem, commodo non fermentum varius, ultricies eu nisl. Praesent eu ligula vel turpis tempus luctus ut ut risus.<div>

 

border-radius values for each corner are set clockwise:

Aside from the extra vendor-specific prefixes -moz and -webkit, which I hope would be given solution soon, we’re good to go!

View Demo

Background image from Subtle Patterns.

Tags: ,

Leave a Reply

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

@rjene