Cómo hacer bordes redondeados con css

Si te dedicas al diseño o desarrollo web hay dos lenguajes que debes dominar: HTML y CSS. Con el primero creas la estructura básica y defines el contenido de la página, mientras que con el segundo estableces el diseño visual y su presentación. CSS es una tecnología que ha evolucionado mucho y actualmente se encuentra en su versión 3. Son muchas las opciones y capacidades que tiene, pero hoy nos centraremos en sólo una de ellas: cómo hacer bordes redondeados con css.

Sintaxis

La sintaxis básica para hacer bordes redondeados con css es:

border-radius: longitud;

donde longitud es cualquier unidad de medida css (px, %, em…). En este caso se aplicaría dicha medida a todas las esquinas. Sin embargo, puede definirse una valor diferente para cada esquina. Pero mejor verlo con un ejemplo.

Ejemplos de bordes redondeados con css

Para entender el uso de la propiedad border-radius realizaremos un ejemplo básico. Crearemos un div y lo redondearemos:

<div id="mi-div" style="border: 2px solid black; height: 200px; width: 200px;"></div>

 

Por defecto, border-radius toma el valor 0, por eso el cuadrado anterior tiene los bordes sin redondear.

Démosle un borde de 20px a todas las esquinas:

#mi-div {
    border-radius:20px;
}

El resultado es:

 

Podemos dar un valor diferente a cada esquina de la siguiente manera:

#mi-div {
    border-radius:15px 50px 30px 5px;
}

El resultado es:

 

El primer valor (15px) corresponde a la esquina superior izquierda, el segundo (50px) a la superior derecha, el tercero (30px) a la inferior derecha y el último (5px) a la inferior izquierda.

También podemos usar esta propiedad con 2 valores:

#mi-div {
    border-radius:15px 50px;
}

El resultado es:

 

El primer valor se aplica a la esquina superior izquierda e inferior derecha. El segundo valor se aplica a la esquina superior derecha e inferior izquierda.

Incluso podemos usar border-radius con 3 valores:

#mi-div {
    border-radius:15px 50px 5px; 
}

El resultado es:

 

El primer valor corresponde a la esquina superior izquierda, el segundo a la esquina superior derecha e inferior izquierda y el tercero a la inferior derecha.

Por último, se puede separar la propiedad border-radius para cada esquina de la siguiente manera:

#mi-div {
    border-top-left-radius: 15px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 5px; 
}

El resultado es:

 

Las cosas se pueden complicar mucho más, ya que la redondez de cada esquina puede estar definida por dos parámetros (definiendo una elipse) y no sólo por uno (definiendo una circunferencia), como en los ejemplos anteriores. No entraré en más detalle ya que lo considero una opción avanzada. Si queréis ahondar en este tema, podéis visitar la web de mozilla.

Compatibilidad con los navegadores

A día de hoy no tenemos que tenerle miedo a hacer bordes redondeados con css, ya que todos los navegadores actuales son compatibles con la propiedad border-radius.

Si alguna vez tenéis dudas si ésta u otra propiedad es compatible o no con todos los navegadores, podéis informaros sobre ello en la web https://caniuse.com. Allí tenéis toda la información necesaria sobre qué propiedades son compatibles con qué navegadores.

Resumiendo

Como habéis visto, hacer bordes redondeados con css es extremadamente fácil. Si le añadimos que esta propiedad es apta para todos los navegadores, ya no tenéis excusa para hacer vuestros diseños un poco más avanzados.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Política de privacidad: Leer aquí | Responsable: Rafael Martín - Górriz Trillo | Fin del tratamiento: Gestión de comentarios | Legitimación: Tu consentimiento | Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal. | Derechos: Acceso, rectificación, portabilidad, olvido | Contacto: [email protected]