Bordes En Css

BORDES EN CSS
CSS permite crear varios tipos de bordes en elementos de la página. El borde más habitual es el de una línea lisa, pero también hay otros tipos de bordes que podemos implementar comouna línea de puntos, bordes redondeados, etc. En este artículo de DesarrolloWeb.com veremos las distintas posibilidades de creación de bordes en CSS.

Lo cierto es que en DesarrolloWeb.com ya hemoshablado varias veces de bordes con CSS, sobre todo para explicar modos de hacer los bordes redondeados, que suelen quedar muy atractivos en las páginas web. De todos modos, vamos a ver cómo seespecifica un borde con CSS.

DIV {
border: 1px solid #d0d0d0;
}

Así conseguiremos que todas las etiquetas DIV de la página tengan un borde de 1 píxel, sólido (de una línea sólida) y con colorgrisáceo (#d0d0d0).

Lo que vamos a ver en este artículo es los distintos estilos de borde, aparte del solid que ya conocemos. Para ilustrar el ejercicio, he creado una página con los distintosejemplos de bordes. Pero ya que estamos hablando de bordes, sobre su declaración en CSS, cabe decir que podríamos utilizar otra notación distinta, en la que especificamos por separado los tres atributos delborde, como sigue:

.bordesolido{
border-color: #aaaaaa;
border-width: 1px;
border-style: solid;
}

También podemos especificar los bordes por separado de cada uno de los lados delelemento, de esta manera:

.bordeporlados{
border-top: 1px solid #ff9999;
border-right: 2px dotted #99ff99;
border-bottom: 2px dashed #9999ff;
border-left: 4px double #666666;}

Todos estas indicaciones para la construcción de bordes las hemos visto en anteriores artículos de CSS de desarrollo web .com, como el manual de css o el taller de css.

Estilos de bordeCon el atributo border-style podemos definir varios estilos de borde, entre una gama relativamente amplia de posibilidades. No obstante, tenemos que admitir que muchos de los estilos hacen bordes un...