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.0
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- Cascada CSS - agosto 24, 2023
- El objeto Math - agosto 23, 2023
- Diferencia entre null y undefined en JavaScript - agosto 16, 2023
