Redondear Borde CSS Como redondear esquinas en CSS
By Categories: Tutorial CSS, TutorialesComentarios desactivados en Redondear Borde CSS. Cómo redondear esquinas en CSS

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.0

 

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:

-moz-border-radius: [tamaño|porcentaje]; -moz-border-top-left-radius: [tamaño|porcentaje] [tamaño|porcentaje]; -moz-border-bottom-left-radius: [tamaño|porcentaje] [tamaño|porcentaje]; -moz-border-top-right-radius: [tamaño|porcentaje] [tamaño|porcentaje]; -moz-border-bottom-right-radius: [tamaño|porcentaje] [tamaño|porcentaje;

 

En el caso de Webkit (sería, por ejemplo, para versiones antiguas de Safari) se soportaba mediante el prefijo -webkit:

-webkit-border-radius: [tamaño|porcentaje]; -webkit-border-top-left-radius: [tamaño|porcentaje] [tamaño|porcentaje]; -webkit-border-bottom-left-radius: [tamaño|porcentaje] [tamaño|porcentaje]; -webkit-border-top-right-radius: [tamaño|porcentaje] [tamaño|porcentaje]; -webkit-border-bottom-right-radius: [tamaño|porcentaje] [tamaño|porcentaje;

Por lo cual, si queremos buscar compatibilidad con nuestros ejemplos anteriores podemos poner lo siguiente:

border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 5px 30px 45px 60px; -moz-border-radius: 5px 30px 45px 60px; -webkit-border-radius: 15px; border-top-left-radius: 400px 200px; -moz-border-top-left-radius: 400px 200px; -webkit-border-radius: 15px;

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

 

  • Hay veces que necesitamos añadir un espacio en blanco en […]

    Continue reading
  • Veamos como quitar la Vista rápida que se muestra en […]

    Continue reading
  • Con el tema Classic y otros temas de Prestashop 1.7, […]

    Continue reading
  • Hay veces que necesitamos añadir un espacio en blanco en […]

    Continue reading
  • Veamos como quitar la Vista rápida que se muestra en […]

    Continue reading