Propiedad border-radius de CSS
La propiedad border-radius se utiliza para crear esquinas redondeadas en el borde exterior de un elemento.
La propiedad border-radius es una de las propiedades de CSS3.
Esta propiedad es una propiedad abreviada para las propiedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius, las cuales se utilizan para establecer las cuatro esquinas de un elemento por separado. Sin embargo, la propiedad border-radius puede utilizarse para definir las cuatro esquinas al mismo tiempo. Puede tener de uno a cuatro valores.
Si se proporcionan cuatro valores, se aplican respectivamente a las esquinas superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda. Si se omite el valor de la esquina inferior-izquierda, se toma por defecto el valor de la superior-derecha. Si se omite el valor de la esquina inferior-derecha, se toma por defecto el valor de la superior-izquierda. Si solo se proporcionan dos valores, el primero se aplica a las esquinas superior-izquierda e inferior-derecha, y el segundo a las esquinas superior-derecha e inferior-izquierda. Si solo se proporciona un valor, se aplica a las cuatro esquinas.
La propiedad border-radius se especifica como:
- uno, dos, tres o cuatro valores de longitud o porcentaje que se utilizan para establecer un único radio para las esquinas.
- opcionalmente seguido por una barra diagonal ( / ) y uno, dos, tres o cuatro valores de longitud o porcentaje. Esto se utiliza para establecer un radio adicional, lo que permite tener esquinas elípticas.
El primer conjunto de valores (1-4) define el radio horizontal para las cuatro esquinas. Un segundo conjunto de valores opcional, precedido por una barra diagonal, define los radios verticales para las cuatro esquinas. Si solo se proporciona un conjunto de valores, estos se utilizarán para determinar tanto los radios verticales como los horizontales por igual.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No |
| Animable | Sí. Cada una de las propiedades de la abreviatura es animable. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.borderRadius = "20px"; (Nota: JavaScript utiliza camelCase borderRadius, a diferencia del nombre de la propiedad CSS con guiones.) |
Sintaxis
Sintaxis de la propiedad border-radius de CSS
border-radius: <length> | <percentage> [ / <length> | <percentage> ]? | initial | inherit;Ejemplo de la propiedad border-radius:
Ejemplo de la propiedad border-radius de CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
width: 50%;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>Border-radius example</h2>
<div></div>
</body>
</html>Resultado
Consulte un ejemplo con valores en porcentaje y píxeles:
Ejemplo de la propiedad border-radius con valores en porcentaje y píxeles:
Ejemplo de la propiedad border-radius de CSS con valores en porcentaje y píxeles
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.radius-pixel {
height: 40px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 12px;
}
.radius-percent {
width: 120px;
height: 120px;
margin-top: 20px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Border-radius example with percent and pixel values</h2>
<div class="radius-pixel"></div>
<div class="radius-percent"></div>
</body>
</html>También puede establecer el border-radius para un elemento con color de fondo o imagen de fondo.
Ejemplo de la propiedad border-radius con las propiedades background-color y background-image:
Ejemplo de la propiedad border-radius de CSS con las propiedades de color e imagen de fondo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.radius-bg {
width: 250px;
height: 200px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 12px;
}
.radius-img {
width: 250px;
height: 200px;
margin-top: 20px;
background-color: lightgray;
background: url('https://www.w3docs.com/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
background-position: left top;
background-repeat: repeat;
border: 2px solid #1c87c9;
border-radius: 25px;
}
</style>
</head>
<body>
<h1> Border-radius example with background color</h1>
<div class="radius-bg"></div>
<h2> Border-radius example with background image</h2>
<div class="radius-img"></div>
</body>
</html>Nota: En navegadores antiguos, las imágenes de fondo pueden no recortarse a las esquinas redondeadas. Utilice background-clip: border-box; para garantizar un comportamiento consistente.
Ahora veamos un ejemplo lleno de varias cajas con diferentes valores de border-radius que forman la forma de las cajas.
Ejemplo de la propiedad border-radius con múltiples valores:
Ejemplo de la propiedad border-radius de CSS con diferentes valores (%, px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 250px;
height: 150px;
border: solid 3px #1c87c9;
background: #1c87c9;
}
.radius_1 {
border-radius: 25px;
}
.radius_2 {
border-radius: 25% 10%;
}
.radius_3 {
border-radius: 10% 30% 50% 70%;
}
.radius_4 {
border-radius: 10% / 50%;
}
.radius_5 {
border-radius: 10px 100px / 120px;
}
.radius_6 {
border-radius: 25% 10%;
}
.radius_7 {
border-radius: 50% 20% / 10% 40%;
}
.radius_8 {
border-radius: 50%;
}
</style>
</head>
<body>
<h1> Border-radius examples</h1>
<div class="radius_1"></div>
<br />
<div class="radius_2"></div>
<br />
<div class="radius_3"></div>
<br />
<div class="radius_4"></div>
<br />
<div class="radius_5"></div>
<br />
<div class="radius_6"></div>
<br />
<div class="radius_7"></div>
<br />
<div class="radius_8"></div>
</body>
</html>Valores
| Valor | Descripción | Probar |
|---|---|---|
| length | Establece el tamaño de redondeo de las esquinas. | Probar » |
| % | Establece el tamaño de redondeo de las esquinas en porcentaje. | Probar » |
| initial | Hace que la propiedad utilice su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad CSS 'border-radius'?