◀ ▶

E. Borde (border)

Partes de un Borde

Ancho

Puede expresarse como un tamaño o con alguno de estos valores:

thin: Borde delgado.
medium: Borde de ancho mediano.
thick: Borde grueso.

Si no se pone, su valor por omisión es: medium.

Estilo

Puede expresarse con alguno de estos valores:

none

Sin borde.

dotted

El borde es una serie de puntos redondos.

dashed

El borde es una serie de guiones de esquinas cuadradas.

solid

El borde es una sola línea sólida.

double

El borde consiste en 2 líneas sólidas paralelas con espacio entre ellas.

La suma del ancho de las líneas y espacio debe ser igual al ancho del borde.

groove

El borde parece como si estuviera tallado dentro de la superficie.

ridge

El borde parece como si saliera de la superficie.

inset

Parece como si el contenido dentro del borde estuviera hundido en la superficie.

outset

Parece como si el contenido dentro del borde saliera de la superficie.

Si no se pone, su valor por omisión es: none.

Color

Se especifica como un color cualquiera.

Si no se pone, su valor por omisión es el color del texto del elemento.

Propiedades para Bordes

Estilo Detallado

border-top-width: Ancho del borde en la parte superior de la caja.
border-top-style: Estilo del borde en la parte superior de la caja.
border-top-color: Color del borde en la parte superior de la caja.
border-bottom-width: Ancho del borde en la parte inferior de la caja.
border-bottom-style: Estilo del borde en la parte inferior de la caja.
border-bottom-color: Color del borde en la parte inferior de la caja.
border-left-width: Ancho del borde en el lado izquierdo de la caja.
border-left-style: Estilo del borde en el lado izquierdo de la caja.
border-left-color: Color del borde en el lado izquierdo de la caja.
border-right-width: Ancho del borde en el lado derecho de la caja.
border-right-style: Estilo del borde en el lado derecho de la caja.
border-right-color: Color del borde en el lado derecho de la caja.

Combinando las Partes del Borde

Combina las tres partes de un borde. Las partes pueden ir en cualquier orden y 1 o 2 de los valores pueden faltar, en cuyo caso se toman los valores por omisión (medium, none y color actual).

border-top: Ancho, estilo y color del borde en la parte superior de la caja.
border-bottom: Ancho, estilo y color del borde en la parte inferior de la caja.
border-left: Ancho, estilo y color del borde en el lado izquierdo de la caja.
border-right: Ancho, estilo y color del borde en el lado derecho de la caja.
border: Ancho, estilo y color del borde único en las partes izquierda, derecha, superior e inferior de la caja.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>

<head>

content="width=device-width">

<title>Bordes</title>

<style>

h1 {

border-top-width: thin;

border-top-style: solid;

border-top-color: cyan;

border-left:

medium dashed red;

border-right:

thick dotted green;

border-bottom:

thick double blue

}

nav {

border: thick groove cyan

}

p {

border: thick ridge pink

}

div {

border: thick inset yellowgreen

}

footer {

border: thick outset orange

}

</style>

</head>

<body>

<h1>Bordes</h1>

<nav>Groove</nav>

<p>Ridge</p>

<div>Inset</div>

<footer>Outset</footer>

</body>

</html>