CSS3 - rounded corners - How To

Do you want to know how to make rounded corners in a few minutes? It's quite simple, you just have to add some CSS and you're done. I have tested this in Firefox and Google Chrome, and it works, but it doesn't work in micro&soft internet explorer, do you think I care ? :-)
Let's have a look how it's done.




First of all, you must define a block element in CSS (image, span, div or whatever you want, but don't forget, it must be a block element!)
For this example I will make a div.

1. Make a div, I will make a div class called rounded, define a blue background and fixed width and height.

div.rounded {
width:150px;
height:150px;
background:blue;
}

2. Add a border and rounded corners, I will define a 4px solid red border, and rounded borders with radius of 8px.

border:4px solid red;
-moz-border-radius:8px;
-webkit-border-radius:8px;

3. Rounded corners are here! Here you have the whole CSS code.

div.rounded {
width:150px;
height:150px;
background:blue;
border:4px solid red;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}

4. Use them in HTML

<div class="rounded">
<h3 class="white">Rounded corners with CSS</h3>
</div>

Isn't that simple?, Let's have a look how it looks.

Rounded corners with CSS

And for those, who can't see it, here is a picture preview:

Related articles:

CSS3 and rounded corners with -moz-border-radius