Como conseguir bordes redondeados mediante CSS

Publicado porjervert

Existe una propiedad de CSS3 para hacer que los bordes definidos mediante CSS tengan esquinas redondeadas. Basta con añadir el siguiente código en el CSS (además de las propiedades de los bordes):

-moz-border-radius: 10px;
border-radius: 10px;

Ahora un ejemplo. Primero el código XHMTL:

<div class="redondeado0">
<p>El borde de esta capa se verá redondeado
si usas un navegador basado en Mozilla o KHTML.</p>
</div>

Ahora el CSS:

.redondeado0 {
/*Elementos de los que se puede prescindir*/
background:#F3FF17;
margin-left:auto;
margin-right:auto;
width:200px;
padding:4px;
/*Aquí empieza la parte importante*/
border: 1px solid #749114; /*definición del borde*/
-moz-border-radius:10px; /*Para que funcione en Mozilla*/
-khtml-border-radius:10px; /*Para Konqueror y Safari */
-webkit-border-radius:10px;
border-radius:10px; /*Forma normalizada*/
}

/*Elemento prescindible*/
.redondeado0 p {
margin:0;
}

Y ahora el resultado:

El borde de esta capa se verá redondeado si usas un navegador basado en Mozilla o KHTML.

Y si no usas un navegador compatible con esa propiedad, aquí tienes una imagen del resultado:

Captura de pantalla: Bordes redondeados

También se pueden utilizar las siguientes formas para redondear solamente los bordes que se quiera:

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Al ser CSS 3 la propiedad border-radius no está soportado por ningún navegador. Yo lo he probado en Firefox 2.0 añadiendo el prefijo -moz- a border-radius. Al parecer ese prefijo se utiliza en las partes de CSS que aun no son oficiales.

Saber más: