Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a Como conseguir bordes redondeados mediante CSS

Datos de búsqueda

Como conseguir bordes redondeados mediante CSS

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:

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio