Cuando queremos redondear el borde de un elemento, sea un borde, una imagen, un background, un botón… utilizaremos la propiedad CSS border-radius.
Lo escribiremos de la siguiente forma: border-radius: especificaremos el tamaño del redondeado (px, rem, %…)
Redondear Borde CSS.
Podemos redondear el borde de forma general igual para todas las esquinas:
border-radius:12px
o bien redondear el borde con css con valores diferentes para cada esquina
border-radius: 6px 12px 9px 3px
See the Pen redondear bordes by Gerard (@gcoma) on CodePen.
Redondear el borde de cada esquina de forma separada con CSS
Redondear borde superior izquierdo con CSS
border-top-left-radius: 12px;
Redondear borde superior derecho con CSS
border-top-right-radius: 12px;
Redondear borde inferior derecho con CSS
border-top-right-radius: 12px;
Redondear borde inferior izquierdo con CSS
border-bottom-left-radius: 12px;
La implementación de border-radius que hemos visto es la de la W3C. Hay implementaciones propietarias en los motores de renderizado de los browsers. Este es el caso de Mozilla. Dónde las propiedades para redondear los borders con CSS están especificadas como:
En el caso de Webkit (sería, por ejemplo, para versiones antiguas de Safari) se soportaba mediante el prefijo -webkit:
Por lo cual, si queremos buscar compatibilidad con nuestros ejemplos anteriores podemos poner lo siguiente:
Los navegadores a partir de los cuales se empezó a dar soporte a border-radius son:
- Chrome 0.2 (con -webkit) y Chrome 4.0 (con el estándar)
- Opera 10.5
- Safari 3.0 (con -webkit) y Safari 5.0 (con el estándar)
- Firefox 1.0 (con -moz) y Firefox 4.0 (con el estándar)
- Internet Explorer 9
