Well, this post will be a simple tutorial of how to make rounded corners on your blog or website using css. I’ve searching for that on the Internet in order to apply it on this blog, and I found some solutions, but I wanted a simple one.

So, first Ithere are the simpe tutorials that explains you that you can do it with corner images but there are more simple ways. There’s a simple standard property, but it doesn’t work with all the browser. Each browser have a property to do it in CSS:

Standard:

.rounded-corners
{
border-radius: 10px;
}

And, in order to add diffrent values in each corners:

.rounded-corners
{
border-top-right-radius = 10px;
border-bottom-right-radius = 10px;
border-bottom-left-radius = 10px;
border-top-left-radius = 10px;
}

Firefox:

Properties for firefox start with the prefix: -moz. Here we have the short way to add a property to all the corners:

.rounded-corners
{
-moz-border-radius: 10px;
}

And the full way:

.rounded-corners
{
-moz-border-radius-topright = 10px;
-moz-border-radius-bottomright = 10px;
-moz-border-radius-bottomleft = 10px;
-moz-border-radius-topleft = 10px;
}

Internet Explorer:

Only for IE 8 and higher. Short way:

.rounded-corners
{
-ms-border-radius: 10px;
}

Full way:

.rounded-corners
{
-ms-border-radius-topleft: 10px;
-ms-border-radius-topright: 10px;
-ms-border-radius-bottomleft: 10px;
-ms-border-radius-bottomright: 10px;
}

Safari and Webkit:

Short way:

.rounded-corners
{
-webkit-border-radius: 10px;
}

Full code:

.rounded-corners
{
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
}

For Opera and other browsers there’s other ways to do it.

All browsers:

So, in oreder to implement the property to all browsers you should have something like this in your stylesheet:

.rounded-corners
{
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
}

And, to apply differnt values in each corner tu can do things like this:

.rounded-corners
{
border-radius: 10px 0 2em 4pt;
-ms-border-radius: 10px 0 2em 4pt;
-moz-border-radius: 10px 0 2em 4pt;
-webkit-border-radius: 10px 0 2em 4pt;
-khtml-border-radius: 10px 0 2em 4pt;
}

Important: in order to work correctly in Safari, I reomend you to use the decomposed way of the code to apply different values in each corner. I say that because I had problems trying to get it work in my blog until I decided to put it in the full way for Safari.

So simply you need to add the above lines in your elements css, sou, if you have #div, you may put this lines it will be the same but with your “#div name” instead of “.rounded-corners”

We wish some day we will have more standards so this way we won’t need to apply all this different codes, but well, it is so simple this way in comprarision with the image-corner’s option.

Font: ClubDesarrolladores

No related posts.