Bordes redondeados

Con CSS3 pueden crearse bordes como en CSS2, pero también se pueden crear bordes redondeados, o personalizarlos usando imágenes 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 medida indicando el grueso de la linea	valor numérico con unidad
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	Medida 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

.borde {

  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

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.