Índice

Bordes de las cajas

1. Estilos de los bordes

Esta propiedad CSS aporta toda una variedad de bordes respecto al único estilo de bordes de HTML.

border-style:

border-top-style:

border-right-style:

border-bottom-style:

border-left-style:

solid o dashed o dotted o double o groove o ridge o inset o outset o hidden o none

Comentarios

  • Conviene ilustrar los distintos bordes, la mayoría son nuevos en el dominio del diseño de páginas web. De este modo, las siguientes palabras clave muestran:

  • solid: un trazo continuo.

  • dashed: guiones.

  • dotted:un trazo punteado.

  • double: un doble trazo continuo.

  • groove: un efecto 3D grabado en la página (opuesto a ridge).

  • ridge: un efecto 3D que sobresale de la página (opuesto a groove).

  • inset: bordes entrantes, incrustados en la página (inverso de outset).

  • outset: bordes salientes, resaltados en la página (inverso de inset).

  • hidden: sin borde (influye sobre el borde adyacente).

  • none: equivalente a border-width: 0px, o sin borde.

solid

images/solid.png

dashed

images/dashed.png

dotted

images/dotted.png

double

images/double.png

groove

images/groove.png

ridge

images/ridge.png

inset

images/inset.png

outset

images/outset.png
  • Para double, el ancho definido por border-width se corresponderá con el tamaño de los dos trazos más el espacio entre ellos.

  • El estilo de borde se mostrará únicamente si se ha definido el grosor del borde (border-width).

  • También es posible definir el estilo de cada lado mediante las propiedades border-top-style, border-right-style, border-bottom-style y border-left-style. Las direcciones top, right, bottom, left designan respectivamente el borde superior, derecho, inferior ...