19.- Capa con vértices redondeados.
Las formas típicamente cuadradas y rectangulares han sido lo tradicional en CSS hasta hace no mucho tiempo. Cuando CSS no poseía la propiedad para redondear las esquinas, se solía usar imágenes que se fundían con el color de fondo para simular una capa de esquinas redondeadas, lo que suponía un trabajo añadido.
Con la propiedad “border-radius” podemos lograr con toda facilidad redondear las esquinas de una capa. Cuando esta propiedad vale 0, tenemos las esquinas cuadradas de siempre. A medida que este valor aumenta, la esquina se hace más redondeada, de mayor diámetro.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1" />
<title>Capa con vertices redondeados.</title>
<style type="text/css">
<!--
.vert_redon{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #FFFFFF;
border-radius: 20px; /* controla el grado de redondeado del vertice */
width: 300px;
padding: 20px;
border: 1px solid #CCCCCC;
background-color:#990000;
}
-->
</style>
</head>
<body>
<div class="vert_redon">
<p>Capa con los vertices redondeados. Código ofrecido por WWW.UTERRA.COM </p>
</div>
</body>
</html>
