◀ ▶

F. Esquinas redondas (border-radius)

Las esquinas de la caja pueden ser redondas aunque no lleven borde.

border-top-right-radius

Tamaño del radio de la esquina superior derecha de la caja.

border-top-left-radius

Tamaño del radio de la esquina superior izquierda de la caja.

border-bottom-right-radius

Tamaño del radio de la esquina inferior derecha de la caja.

border-bottom-left-radius

Tamaño del radio de la esquina inferior izquierda de la caja.

border-radius: tam

tam es el tamaño del radio de las 4 esquinas de la caja.

border-radius: tam_arrizq_abder tam_arrder_abizq

tam_arrizq_abder es el tamaño del radio de las esquinas superior izquierda e inferior derecha de la caja.

tam_arrder_abizq es el tamaño del radio de las esquinas superior derecha e inferior izquierda de la caja.

border-radius: tam_arrizq tam_arrder_abizq tam_abder

tam_arrizq es el tamaño del radio de la esquina superior izquierda de la caja.

tam_arrder_abizq es el tamaño del radio de las esquinas superior derecha e inferior izquierda de la caja.

tam_abder es el tamaño del radio de las esquinas inferior derecha de la caja.

border-radius: tam_arrizq tam_arrder tam_abder tam_abizq

tam_arrizq es el tamaño del radio de la esquina superior izquierda de la caja.

tam_arr es el tamaño del radio de las esquinas superior derecha de la caja.

tam_abder es el tamaño del radio de las esquinas inferior derecha de la caja.

tam_abizq es el tamaño del radio de la esquina inferior izquierda de la caja.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport"

content="width=device-width,

initial-scale=1.0">

<title>border-radius</title>

<style>

body {

color:yellow

}

h1 {

background-color: blue;

border-top-right-radius: 10px;

border-top-left-radius: 5px;

border-bottom-right-radius:

20px;

border-bottom-left-radius:

2rem

}

div {

background-color: royalblue;

padding: 0.5rem 1rem;

border-radius: 30px

}

p {

background-color: blueviolet;

padding: 0.5rem 1.5rem;

border-radius:

10px 20px 30px 40px;

}

</style>

</head>

<body>

<h1>border-radius</h1>

<div>Esquinas</div>

<p>Redondas</p>

</body>

</html>