Estilos de borde CSS

Estilos de borde CSS

Css permite crear varios tipos de bordes en los elementos de la pagina. El borde más utilizado es una línea lisa, ahora conoceremos también otros tipos de bordes que podemos implementar como una línea de puntos, bordes redondeados, etc. En este articulo veremos los diferentes tipos de bordes que se pueden implementar. En los bordes encontramos también otros atributos que podemos aplicar al definir un borde estos son:

Border-color   --->color del borde
border-width   --->ancho del borde 
border-style    ---> estilo del borde

Pero para ahorrarnos peso en la plantilla o confundirnos menos podemos utilizar  esos tres atributos en uno solo, ejemplo:

border: 1px solid #000;

Estos son los diferentes tipos de border-style:

• solid
• dotted
• double
• dashed
• groove
• ridge
• inset
• outset

Podemos tambien utilizar diferentes estilos, anchos y colores en cada lado del borde. Ahora veremos un ejemplo de cada estilo de borde.

 Este DIV tiene bordes distintos para cada lado.
div.bordeporlados{
border top: 1px dotted #368913;
border-left: 6px inset #231389;
border-right: 5px groove #F7F412;
border-bottom: 6px double #EE1C1C;
}

Este DIV tiene un borde sólido (solid):
div.bordesolido{
 border: 1px solid #aaa;
 }

Este DIV tiene borde con línea de puntos (dotted)
div.bordepunteado{
border: 2px dotted #aaa;
}

Este DIV tiene un borde doble (double) para poder visualizar tienes que agregar un ancho mayor.
div.bordedoble{
border: 10px double #aaa;
}

Este DIV tiene el borde "dashed",es como punteado, pero con el punto más largo.
div.bordedashed{
border: 2px dashed #aaa;
}

Este DIV tiene un borde tipo "groove", que crea una especie de relieve.
div.bordegroove{
border: 10px groove #8C489F;
}

Este DIV tiene un borde tipo ridge.
div.borderidge{
border: 10px ridge #217C7E;
}

Este DIV tiene un borde inset, que también crea una especie de relieve como si el elemento estuviese hundido, combiando el borde en distintos tonos más claros u oscuros.le he agregado un color de fondo para que se vea bien el efecto.

div.bordeinset{
border: 10px inset #aaa;
background: #3399FF;
}

Este DIV tiene un borde outset, que es como si el borde produciera un relieve que imita como si estuviera levantado. En este caso le he puesto un color de fondo para que se vea mejor el efecto.

div.bordeoutset{
border: 10px outset #ccc;
background: #cccccc;
}

Faltaria esplicar los bordes redondeados pero para eso hare otro post para explicarlo mas detalladamente.

Comparte este artículo:..
• Twittear

ESCRITO POR Neomontoya

Mi nombre es Harvey (Colombia) soy el administrador de xevero.

Si te ha gustado este artículo, Subscríbete y recibe las últimas actualizaciones de la página directamente en tu correo electrónico...

Recuerda confirmar tu suscripción, haciendo click en el enlace que recibirás por email.