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:
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:
- CSS3: How to create rounded borders in Webkit and Mozilla/Firefox (CSS3.info)
- Rounded corners and shadowed boxes (W3C)
- Métodos alternativo sin usar CSS3, compatibles con los navegadores actuales: