Índice

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:

border-radius

x y;

donde x e y son un valor o un porcentaje.

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.

images/23ri15bis.png

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>   ...