Unidad 10. CSS. Unidades. Color. Margen. Fondo. Borde (XVII)



10.17. Bordes

Los bordes de un elemento de HTML se definen con tres atributos básicos: estilo, anchura y color. Veamos las propiedades CSS para definirlos. Luego veremos que se pueden definir de forma compacta con el atributo border y tres valores.

border-style

El estilo del borde se refiere a la forma del borde y puede tomar estos valores: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.

Se puede establecer un estilo para cada uno de los cuatro bordes (superior, derecho, inferior, izquierdo) o un único valor para todos ellos. Hay varias formas de hacerlo:

- un valor: border-style: solid, se aplica el estilo a los cuatro bordes.

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis.

 

- dos valores: border-style: solid dotted, se aplica el primer valor al borde superior e inferior, y el segundo valor al borde derecho e izquierdo.

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis.

- tres valores: border-style: solid dotted double, se aplica el primer valor al borde superior, el segundo valor al borde derecho e izquierdo, y el tercer valor al borde inferior.

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis.

- cuatro valores: border-style: solid dotted double dashed, se aplica el primer valor al borde superior, el segundo valor al borde derecho, el tercer valor al borde inferior, y el cuarto valor al borde izquierdo,

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis.

También se pueden aplicar de forma explícita valores a cada borde con las propiedades: border-top-style, border-right-style, border-bottom-style, border-left-style.


Enero-2019 (V 2.0)
Pág. 10.17
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.