Crea tu web, tutor html, css

Bordes redondeados

Con CSS3 pueden crearse bordes como en CSS2, pero también se pueden crear bordes redondeados, o personalizarlos usando imágnes para formar esos bordes o incluso dales efecto de sombra.

Los bordes aceptan varios atribnutos para darles el grosor, color y estilo, y con cSS3 además se les puede dar un efecto de curva en las esquinas. Es la propiedad border-radius. Cada border se compone de cuatro bordes diferentes uno para cada lado de la caja: border-top, border-right, border-bottom y border-left. Todas se pueden abreviar en una sola, border, si todas sus propiedades son iguales .

Las propiedades específicas de los bordes son de

Propiedades del elemento border
Propiedad Uso Valor
border-width un valor indicando el grueso de la linea valor numérico
border-style El tipo de linea para dibujar el borde dashed, dotted, double, groove, inset, outset, ridge, solid, inherit, hidden, none
border-color El color de la linea código de color
border-radius El redondeado de las esquinas Largo del radio de la curva

Si se quieren aplicar las propiedades individuales ancho, estilo y color para cada lado añadirías en medio del nombre de la propiedad el lado que quieras formatear border-top-width o border-bottom-style. . Para el radio de las esquians tendrías que usar una combinación de lados por esquina: superior-derecha sería border-top-right-radius

Se pueden abreviar todas las propiedades de los lados para todos los bordes usando una sola propiedad border:

border: 2px solid red

El radio sigue no se puede usar en esa abreviatura.

Un ejemplo sencillo para una caja con borde redondeado en las cuatro esquinas

div
{
border-width:2px solid #a1a1a1;
border-style: solid;
border-color: #a1a1a1;
padding:40px;
background:#dddddd;
width:300px;
border-radius:25px;
}

Nos daría un cuadro como este
Un cuadro con esquinas redondeadas, fácil. 

Hemos creado un rectángulo (un contenedor <div>) con un borde sólido de 2 px color #a1a1a1, un relleno interior (padding) de 40 px, color de fondo (background: #dddddd) ancho 300 px y esquinas redondeadas de 25 px de radio. Se pueden conseguir bloques redondos aplicando radios para todas las esquinas igual al ancho y alto del bloque (cuadrado, claro).

 No es bueno abusar de los bordes y a veces un borde con un color muy ligero es suficiente. Las cajas cerradas abigarran el contenido de la página.

Una muestra de los distintos estilos de bordes que pueden usarse en las páginas web, algunos apenas son perceptibles. Se pueden usar includo para dar cierto aspecto 3D.

dashed. 
dotted. 
double. 
groove. 
inset. 
outset. 
ridge. 
solid. 

No es bueno abusar de los bordes. Un elevado número de cajas cerradas  por bordes abigarran el contenido de la página.

A veces una ligera linea de un tono algo subido respecto al fondo es suficiente.

Estos bordes son aplicables igualmente a tablas y celdas