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