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.
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.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
