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.

Bueno, pues me he decidido a hacer un blog, para, en parte, y supongo que en su totalidad, mostrar cosas que vaya haciendo buenas y malas, grandes y pequeñas, de todo un poco, dibujos poco agraciados hechos en clase (aka comodines), animaciones Flash, After effects, diseño de logotipos layouts etc. En definitiva todo lo que haga, que pueda tener un mínimo valor estético.

Conp el tiempo alomejor también me animo a colgar cosas del rollo, reviews de programas, y cosas así útiles para alguien, quien sabe.

Dudava entre hacer el blog en Blogger o en Wordpress, pero eso fue antes de hacer un blog con el primero, creo que Wordpress ofrecia mas libertad tanto en contenido como en diseño del propio blog.En cuanto al theme del blog, he pillado un tal.. Mandigo que es majo, y con algun tiempo me he dedicado a customizar unos mínimos, básicamente el header, donde podemos ver ese logo mio tan cool, y esa mano mia tan tope de cool.

Pues aquí se queda mi primer post que cerraré con… un adiós (hasta pronto)

No related posts.