En este artículo vamos a conoce como crear bordes con esquinas redondeadas, una característica que se introduce a partir de CSS3 y que en pasado sólo era posible de lograr mediante el apoyo de algún editor de gráficos. Pero ahora podemos aplicar bordes redondeados empleando la propiedad border-radius, con la cual podemos especificar un radio para los bordes de cada esquina de un elemento HTML.
La sintaxis es la siguiente:
border-radius: radio-horizontal/ radio-vertical
Por defecto, el valor de esta propiedad es 0, y a medida que se aumenta este valor las esquinas del o los bordes se van redondeando.
Los valores se pueden especificar tanto en porcentajes como en cualquier unidad de medida relativa.
Hay 4 formas de especificar el radio de las esquinas:
Especificando un sólo valor, en cuyo caso todas las esquinas del elemento se verán redondeadas.
Si definimos dos valores los bordes el primer parámetro corresponderá a las esquinas superior-izquierda e inferior-derecha, y el segundo valor a las esquinas superior-derecha e inferior-izquierda.
Si definimos tres valores, el primer valor corresponde a la esquina superior-izquierda, el segundo a las esquinas superior-derecha e inferior-izquierda y el tercero a la esquina inferior-derecha.
Y por último, si definimos 4 valores el efecto se aplica a cada esquina por separado: a la esquina superior-izquierda, a la esquina superior-derecha, a la esquina inferior-derecha y a la esquina inferior-izquierda..
Por ejemplo vamos a crear un elemento HTML <div> al que le agregaremos un atributo class al que apuntaremos para aplicar los estilos:
<div class="bordes-redondeados"></div>
Lo siguiente que haremos será aplicar diferentes valores para cada borde. Para ello crearemos la siguiente regla:
div.bordes-redondeados {
width: 400px;
height: 400px;
background-color: #ddd;
border-radius: 90px 21px 181px 180px;
}
Este sería el resultado en el navegador:
See the Pen Untitled by simplicitytree (@simplicitytree) on CodePen.
- Los mejores Frameworks CSS: una guía completa para desarrolladores - septiembre 14, 2024
- Qué es una página web estática, cómo funciona y cómo crearla - septiembre 2, 2024
- Números en JavaScript - agosto 2, 2024