Atributo border
En CSS, es posible dar un borde a los elementos, el cual puede tener diferentes combinación de estilos.
Donde su sintaxis especifica el grosor del borde, seguido del tipo o estilo de borde y finalmente el color del borde.
Veamos el siguiente ejemplo:
Lo que veremos en el navegador será:<!DOCTYPE html><html lang="es"><head><style>#solid{border: 5px solid blue;}#double{border: 5px double green;}#groove{border: 5px groove yellow;}#ridge{border: 5px ridge red;}#inset{border: 5px inset purple;}#outset{border: 5px outset blue;}#dashed{border: 5px dashed green;}#dotted{border: 5px dotted red;}</style></head><body><p id="solid">Estilo de borde <b>solid</b></p><p id="double">Estilo de borde <b>double</b></p><p id="groove">Estilo de borde <b>groove</b></p><p id="ridge">Estilo de borde <b>ridge</b></p><p id="inset">Estilo de borde <b>inset</b></p><p id="outset">Estilo de borde <b>outset</b></p><p id="dashed">Estilo de borde <b>dashed</b></p><p id="dotted">Estilo de borde <b>dotted</b></p></body></html>
Existen otros estilos que incluyen el nombre de border, pero los veremos mas tarde, ya que estos conforman parte de los nuevos estándares de CSS3
Otra cosa que también podemos realizar, es colocar solo el trazo correspondiente a un borde especificado, es decir, no dibujar el contorno completo del borde sino solo una linea, dos o tres. Esto se logra de la siguiente manera:
- Para colocar el borde superior de un elemento la sintaxis sería:
- border- top: 5px solid red;
- Para especificar el borde inferior de un elemento, la sintaxis sería:
- border-bottom: 5px solid red;
- Para especificar el borde derecho o izquierdo de un elemento, la sintaxis sería:
- border-right/left: 5px solid red;
Por el momento, por mi parte es todo.
Recuerden Compartir y Darle
Hasta la Próxima
Recuerden Compartir y Darle
Hasta la Próxima
No hay comentarios:
Publicar un comentario