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.
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> ... Si desea saber más, le proponemos el siguiente libro:
Versión impresa
Versión online
En ilimitado con la suscripción ENI
En la tienda oficial de ENI
Condiciones generales de usoCopyright - © Éditions ENI ||Política de protección de datos del grupo ENI