Computación y electrónica

Estilos de borde redondeado en CSS

Escrito por debbie wash | Traducido por pau epel
Estilos de borde redondeado en CSS

Los efectos de bordes redondeados se pueden crear en CSS3.

Hemera Technologies/AbleStock.com/Getty Images

Crear bordes redondeados en CSS se ha vuelto mucho más sencillo con CSS3. La propiedad de radio de borde esencialmente crea esquinas redondeadas en elementos mediante declaraciones CSS puras. El soporte de navegadores web para esta propiedad no es consistente, sin embargo, de modo que al usarla dentro de una página web es buena idea añadir dos declaraciones adicionales.

Otras personas están leyendo

Crear esquinas redondeadas

La propiedad de radio de borde es la declaración que produce las esquinas redondeadas. El valor de radio de borde utiliza configuración de píxeles o espacios em, donde números más altos aumentan la pronunciación de la curva. Al igual que para los márgenes, rellenos y bordes, hay propiedades de radio de borde separadas para cada esquina de un elemento. Si se ingresan dos valores, se convierten en los radios horizontal y vertical para una esquina elíptica.

Variación para Mozilla

Los navegadores Mozilla requieren ligeras variaciones en el código CSS3 para implementar bordes redondeados. Ya sea que uses valores "px" o "em", uno o dos números producen resultados diferentes. La sintaxis de Mozilla antes de Firefox 3,5 sólo soportaba bordes redondeados para un solo dígito; añadir un segundo valor resultaba en una esquina cuadrada estándar. La sintaxis de las nuevas versiones de Firefox permite la definición de cuatro diferentes esquinas redondas o elípticas. Una barra diagonal entre dos numerales es interpretada como configuraciones horizontal y vertical. border-top-right-radius, -moz-border-radius-topright border-bottom-right-radius, -moz-border-radius-bottomright border-bottom-left-radius, -moz-border-radius-bottomleft border-top-left-radius, -moz-border-radius-topleft border-radius, -moz-border-radius

Variación para WebKit

La propiedad de radio de borde en WebKit, usada por los navegadores Safari, acepta uno o dos valores y los aplica para dar estilo a todas las 4 esquinas para una forma simétrica. Al igual que la variación para Mozilla, la de WebKit difiere ligeramente de la declaración CSS3. border-top-right-radius, -webkit-border-top-right-radius border-bottom-right-radius, -webkit-border-bottom-right-radius border-bottom-left-radius, -webkit-border-bottom-left-radius border-top-left-radius, -webkit-border-top-left-radius border-radius, -webkit-border-radius

Bordes redondeados usando cajas

Hemera Technologies/AbleStock.com/Getty Images

El contenedor div produce un borde redondeado dentro de un área definida como una caja, en contraste con un borde alrededor del perímetro del div. Esto es creado al dar estilo al div padre con un div hijo. El código es simple, para aquéllos adeptos a codificar: .wrap { border-width: 0; background-color: #A52A2A; width: 54%; padding: 0.6em; } .wrap #panel { background-color: inherit; height: 6em; border: 4px dashed #A52A2A; text-align: center; } And the html: <div class="wrap"> <div id="panel"> <p>Este panel aparecerá como un borde interior cosido.</p> </div> </div>

Más galerías de fotos

comentarios

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media