Bordes con CSS

Bordes con CSS

Boredes con CSS

Todos los elementos que forman las etiquetas de HTML que van dentro de body (<body></body>) en una página web cuentan con cuatro lados  y sus vértices son rectos, formando un rectángulo o un cuadrado, dependiendo de sus medidas. Estos cuadriláteros o cajas no siempre se distinguen, ya que por omisión no cuentan con un estilo de borde que sea visible.

Sin embargo, al hacer visibles los bordes con CSS, podemos lograr que el contenido del elemento resalte, o bien, luzca separado de otros elementos.

Los bordes se pueden aplicar a cualquier elemento de HTML, mientras tenga contenido y/o cuente con dimensiones definidas.

La forma de establecerlos es mediante los siguientes atributos:

border-width (ancho del borde)

Representa el ancho del contorno del elemento. Las unidades de medida mas utilizadas para este atributo son Pixeles (px) y Ems (em).

border-color (color del borde)

Representa el color del contorno. Su valor puede darse con cualquier forma de color (ver Color en CSS).

border-style (estilo del borde)

Su valor indica la forma en la que debe mostrarse el contorno del elemento. Sus posibles valores son:

  • none: valor por omisión, oculta el contorno.

2D

  • solid: el contorno se forma por medio de una línea constante.
  • dotted: el contorno se forma por medio de puntos.
  • dashed: el contorno se forma por medio de guiones.
  • double: el contorno se forma por medio de una doble línea.

3D

Debido a que el efecto se genera oscureciendo partes del contorno, su color debe ser distinto a negro.

  • groove: el contorno se forma por medio de un efecto tridimensional, donde pareciera estar tallado en el fondo. Divide en dos la línea de contorno, oscureciendo una de ellas para lograr el efecto.
  • ridge: el contorno se forma por medio de un efecto tridimensional, donde pareciera sobresalir del fondo. Divide en dos la línea de contorno, oscureciendo una de ellas para lograr el efecto.
  • inset: el contorno se forma por medio de un efecto tridimensional, donde pareciera estar incrustado en el fondo. Oscurece los contornos superior e izquierdo para lograr el efecto.
  • outset: el contorno se forma por medio de un efecto tridimensional, donde pareciera sobresalir del fondo. Oscurece los contornos inferior y derecho para lograr el efecto.

See the Pen bordes by Miguel Méndez (@codigo-web) on CodePen.0

Formas y atajos

Los atributos anteriores pueden establecerse de forma independiente para cada uno de los cuatro lados del elemento, para realizarlo se incluyen:

  1. El término border.
  2. A continuación un guión medio () y el lado que deseamos afectar: top (superior), right (derecho), bottom (inferior) o left (izquierdo).
  3. Por último se coloca un guión medio () y el atributo: width (ancho), color (color) o style (estilo).

See the Pen usoBordes by Miguel Méndez (@codigo-web) on CodePen.0

Podemos dejar en solo un atributo (en vez de tres) el ancho, estilo y color del borde de cada lado utilizando el atributo border seguido por un guión medio ()  e indicando el lado que deseamos afectar:

top (superior), right (derecho), bottom (inferior) o left (izquierdo).

El valor del atributo deberá ser el ancho, el tipo y el color deseado en cualquier orden, cada uno de ellos separado por un espacio en blanco.

See the Pen bordeInferior by Miguel Méndez (@codigo-web) on CodePen.0

Por lo regular se desea que el borde de una caja sea uniforme, es decir que el borde de cada uno de los cuatro lados conserven el mismo ancho, estilo y color. Para ello se utiliza el atributo border, y su valor, igual que en el caso anterior,  deberá ser el ancho, el tipo y el color deseado en cualquier orden, cada uno de ellos separado por un espacio en blanco.

See the Pen enmarcado by Miguel Méndez (@codigo-web) on CodePen.0

Solo por diversión

Vamos a generar un marco para una imagen, similar a la ilustración del artículo.

See the Pen marco by Miguel Méndez (@codigo-web) on CodePen.0

Para lograr el efecto generamos dos clases, una para la parte exterior del marco y otra para la interior.

La parte exterior del marco debe simular que está “levantada”, es decir debe sobresalir del fondo, por lo que empleamos el estilo outset.

La parte interior debe estar dentro de la exterior y debe simular que se encuentra “hundida”, es decir, incrustada, por lo que utilizamos el estilo inset.

Conclusión

Los bordes con CSS proporcionan una forma muy eficiente de resaltar elementos y de hacer separaciones vistosas y elegantes con pocas líneas de código.

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz