Bordes redondeados de las cajas
Después de casi 20 años
de formas rectangulares con ángulos rectos y puntiagudos,
por fin llegan los bordes redondeados.
Hasta el día de hoy, los bordes redondeados
se conseguían a partir de una serie de trucos y astucias
que solían consistir en múltiples divisiones <div> con imágenes de fondo.
Con CSS3, los bordes redondeados se diseñan directamente
a partir de algunas pocas líneas de código de
propiedades de estilo.
Los bordes redondeados en los cuatro extremos
se introducen mediante la propiedad:
Los valores de x e y determinan los radios
horizontal y vertical de un cuarto de elipse, lo cual provocará la
curvatura de la esquina.
Los siguientes ejemplos son más descriptivos.
Es posible indicar un único valor.
En ese caso, el valor de x será igual al valor de y.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
#round { width: 200px; height: 80px;
background-color: rgb(185,205,225);
border: 1px solid gray;
border-radius: 1em;}
</style>
</head> ...