Bordes redondeados utilizando solo CSS3

Para ello, usaremos la propiedad de CSS3 "border-radius".

Muy bien, empezemos, pongamos un ejemplo :



HTML :

<div class="redondeado">
</div>

CSS :

.redondeado {
    background-color: #D62626;
    border-radius:5px 5px 5px 5px;
    -moz-border-radius:5px 5px 5px 5px;
    -webkit-border-radius:5px 5px 5px 5px;
    width: 200px;
    height: 100px;
}

Resultado :

Explicación :


border-radius: 5px 5px 5px 5px;

Lo traduciriamos como 

border-radius: Esquina superior derecha  Esquina superior izquierda Esquina inferior derecha Esquina inferior izquierda

 Como pueden ver, es muy facil! Las otras dos lineas son para tener compatibilidad con Mozilla Firefox y Google Chrome.

-moz-border-radius:5px 5px 5px 5px;       -> Mozilla Firefox
-webkit-border-radius:5px 5px 5px 5px;    -> Google Chrome

Es recomendable usar las 3 propiedades para tener compatibilidad con todos los navegadores!