Esta página utiliza 'XHTML 1.0 Transitional' válido Esta página utiliza CSS válido
Búsqueda personalizada

Crear una capa con bordes redondeados con CSS3

La propiedad border-radius de CSS3 permite utilizar fácilmente los bordes redondeados en nuestros diseños sin necesidad de usar varias etiquetas div e imágenes para las esquinas.

Ejemplo 1. Caja con las esquinas redondeadas en Chorme, Safari, Firefox, IE9 y superiores

El código css para conseguir los bordes redondeados del ejemplo anterior sería el siguiente:

.bordes-redondeados {
  border-radius: 15px;
}

Las esquinas redondeadas se pueden conseguir de manera independiente utilizando las cuatro propiedades border-*-radius (border-top-left-radius, border-bottom-left-radius, border top-right-radius y border-bottom-right-radius) o utilizando el modo abreviado border-radius

Ejemplo 2. Caja con las esquinas redondeadas en Chorme, Safari, Firefox, IE9 y superiores

.bordes-redondeados {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 20px;
}

Todas las propiedades anteriores aceptan uno o dos valores. En el caso de que se proporcionen dos valores, cada uno se utiliza para definir el radio horizontal y vertical que sirve para pintar un cuarto de la elipse, lo que nos permite definir la curvatura.

En el ejemplo siguiente se puede ver el efecto conseguido al proporcionar el segundo valor a la propiedad


También podemos utilizar el modo abreviado border-radius para definir los 4 esquinas al mismo tiempo.

.bordes-redondeados {
  border-radius: 15px 10px 5px 20px;
}

Si queremos indicar dos valores para cada esquina podemos agregar el segundo conjunto de valores separándolo por una barra diagonal ( / ) .

.bordes-redondeados {
  border-radius: 15px 10px 5px 20px / 10px 20px 15px 30px;
}

Fecha de publicación: 09/11/2015
Etiquetas: css , html , CSS3
Prohibida la reproducción total o parcial de los textos o imágenes aquí expuestos salvo autorización expresa y por escrito del autor de los mismos. © 2007-2017 Locualo v1.0. Política de privacidad [www.locualo.net]