6/5/2019 Bordes. CSS 2/3. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.
org
CSS 2 / CSS 3: Bordes
Cualquier elemento de una página web puede tener un borde (en inglés, border). En esta lección
se comentan las propiedades CSS que permiten definir el borde de un elemento. Se comentan
tanto las propiedades CSS 2.1 como algunas propiedades CSS 3. En la CSS 3: Bordes se
comentan más propiedades CSS 3 relacionadas con bordes.
La propiedad compuesta border border
La propiedad compuesta border permite establecer simultáneamente los cuatro
bordes (arriba, derecha, abajo e izquierda) de un elemento, definiendo su:
color (nombre de color o código RGB o el valor transparent)
grosor (valor absoluto de distancia, o los valores thin (fino), medium (medio) o thick (grueso))
estilo
Las tres características del borde se pueden escribir en cualquier orden.
p {
border: red 5px solid;
}
Estilos de bordes
Los estilos de bordes definidos en CSS 2 son none, hidden, dotted, dashed, solid, double, groove,
ridge, inset y outset.
p {
border: red 5px none;
}
p {
border: red 5px hidden;
}
p {
border: red 5px dotted;
}
p {
border: red 5px dashed;
}
p {
border: red 5px solid;
}
www.mclibre.org/consultar/htmlcss/css/css-bordes.html 1/9
6/5/2019 Bordes. CSS 2/3. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org
p {
border: red 5px double;
}
p {
border: red 5px groove;
}
p {
border: red 5px ridge;
}
p {
border: red 5px inset;
}
p {
border: red 5px outset;
}
Los estilos groove, ridge inset y outset producen un efecto tridimensional, pero el resultado
depende del color del borde y de los colores de fondo del elemento y del elemento superior:
p {
border: white 8px groove;
}
p {
border: white 8px ridge;
}
p {
border: white 8px inset;
}
p {
border: white 8px outset;
}
Los estilos none y hidden producen el mismo resultado (no se muestra el borde), salvo en el caso
de las tablas en modo colapsado, en el que hidden oculta el borde independientemente del borde
de la casilla contigua, pero none no (para que se oculte el borde común, las dos casillas
contiguas deben tener su borde común en none).
www.mclibre.org/consultar/htmlcss/css/css-bordes.html 2/9
6/5/2019 Bordes. CSS 2/3. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org
table {
border-collapse: collapse;
}
td.sinborde {
border: hidden
}
table {
border-collapse: collapse;
}
td.sinborde {
border: none
}
Las propiedades compuestas border-top, border-right, border-bottom y
border-left
Las propiedades compuestas border-top,
border-top border-right border-bottom border-left
border-right, border-bottom y border-left
permiten establecer de forma independiente
los cuatro bordes (arriba, derecha, abajo e
izquierda, respectivamente) de un elemento, definiendo su color, su grosor y su estilo. Se pueden
escribir las tres características de cada borde en cualquier orden. Se puede definir uno, dos, tres
o cuatro bordes.
border-top
En el modelo de caja CSS, cualquier
elemento (texto, imagen, etc.) está
border-left metido dentro de una caja border-right
rectangular que puede tener borde,
margen interior y margen exterior.
border-bottom
p {
border-left: red 5px solid;
}
p {
border-top: black 5px dashed;
border-left: red 5px solid;
}
www.mclibre.org/consultar/htmlcss/css/css-bordes.html 3/9
6/5/2019 Bordes. CSS 2/3. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org
p {
border-top: black 5px dashed;
border-bottom: blue 10px dotted;
border-left: red 5px solid;
}
p {
border-top: black 5px dashed;
border-right: green 10px double;
border-bottom: blue 10px dotted;
border-left: red 5px solid;
}
Las propiedades border-color, border-width y border-style
Las propiedades border-color, border-width y border-
border-color border-width border-style
style permiten establecer, respectivamente, el color, el
grosor y el estilo de los cuatro bordes de un elemento.
A cada una de las propiedades se le puedes dar uno,
dos, tres o cuatro valores, que se interpretan de la siguiente manera:
1 valor: este valor se aplica a los cuatro bordes
2 valores: el primer valor se aplica a los bordes inferior y superior y el segundo a los bordes
derecho e izquierdo
3 valores: el primer valor se aplica al borde superior, el segundo a los bordes derecho e
izquierdo y el tercer valor al borde inferior
4 valores: el primer valor se aplica al borde superior, el segundo al borde derecho, el tercer
valor al borde inferior y el cuarto al borde izquierdo
www.mclibre.org/consultar/htmlcss/css/css-bordes.html 4/9
6/5/2019 Bordes. CSS 2/3. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org
border-color: red
1
En el modelo de caja CSS, cualquier
elemento (texto, imagen, etc.) está
1 metido dentro de una caja 1
rectangular que puede tener borde,
margen interior y margen exterior.
1 2
border-color: red blue
1
En el modelo de caja CSS, cualquier
elemento (texto, imagen, etc.) está
2 metido dentro de una caja 2
rectangular que puede tener borde,
margen interior y margen exterior.
www.mclibre.org/consultar/htmlcss/css/css-bordes.html 5/9
6/5/2019 Bordes. CSS 2/3. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org
1 2 3
border-color: red blue yellow
1
En el modelo de caja CSS, cualquier
elemento (texto, imagen, etc.) está
2 metido dentro de una caja 2
rectangular que puede tener borde,
margen interior y margen exterior.
1 2 3 4
border-color: red blue yellow green
1
En el modelo de caja CSS, cualquier
elemento (texto, imagen, etc.) está
4 metido dentro de una caja 2
rectangular que puede tener borde,
margen interior y margen exterior.
p {
border-color: red;
border-width: 10px;
border-style: solid;
}
p {
border-color: red black;
border-width: 10px;
border-style: solid;
}
p {
border-color: red black green;
border-width: 10px;
border-style: solid;
}
www.mclibre.org/consultar/htmlcss/css/css-bordes.html 6/9
6/5/2019 Bordes. CSS 2/3. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org
p {
border-color: red black green orange;
border-width: 10px;
border-style: solid;
}
p {
border-color: red black green;
border-width: 10px 40px;
border-style: dashed solid dotted;
}
En general, para que el navegador muestre un borde, se tendrían que definir las tres propiedades
(color, grosor y estilo), pero en realidad se puede comprobar que con sólo definir el estilo ya se
muestra un borde negro. El motivo es que la hoja de estilo predeterminada de los navegadores
define un color y un grosor por omisión y al definir el estilo se completa la definición del borde.
p {
border-style: solid;
}
Si no se define el estilo del borde, aunque se defina el color y el grosor los navegadores no
muestran el borde.
p {
border-color: red;
border-width: 5px;
}
Las propiedades individuales border-top-color border-top-width border-top-style
Se puede establecer de forma
independiente cada propiedad de cada
borde mediante las propiedades:
border-top-color, border-right-color, border-bottom-color, border-left-color
border-top-width, border-right-width, border-bottom-width, border-left-width
border-top-style, border-right-style, border-bottom-style, border-left-style
En general, para que el navegador muestre un borde, se tienen que definir las tres propiedades
(color, grosor y estilo), aunque normalmente los navegadores asignan el color negro como color
prederminado, por lo que si no se establece el color del borde suele mostrarse de color negro
Bordes redondeados: border-radius, border-top-right-radius, border-
bottom-right-radius, border-bottom-left-radius y border-top-left-radius
www.mclibre.org/consultar/htmlcss/css/css-bordes.html 7/9
6/5/2019 Bordes. CSS 2/3. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org
La futura recomendación CSS 3: Fondos y bordes permite definir bordes con
border-radius
esquinas redondeadas:
La propiedad border-radius define el radio de círculo de las cuatro esquinas.
Los valores se pueden expresar como distancias o como porcentajes. Cuanto mayor es el
valor, mayor es la esquina redondeada.
border-radius
border-radius
Las propiedades border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
y border-top-left-radius permiten definir los radios de cada una de las esquinas de forma
independiente.
border-top-left-radius border-top-right-radius
border-bottom-left-radius border-bottom-right-radius
blockquote {
padding: 3px 10px;
border: PowderBlue 5px solid;
border-radius: 20px;
}
blockquote {
padding: 3px 10px;
border: PowderBlue 5px solid;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
www.mclibre.org/consultar/htmlcss/css/css-bordes.html 8/9
6/5/2019 Bordes. CSS 2/3. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org
blockquote {
padding: 3px 10px;
border: PowderBlue 5px double;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
blockquote {
padding: 3px 10px;
border: PowderBlue 5px dashed;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
Bordes en <html> y <body>
Las etiquetas <html> y <body> también pueden tener bordes, como muestra la siguiente página
de ejemplo.
El borde de <body> se adapta al contenido, sin tener en cuenta los elementos flotantes, mientras
que el borde de <html> abarca los elementos flotantes, como muestra la siguiente página de
ejemplo.
Última modificación de esta página: 18 de noviembre de 2018
Esta página forma parte del curso Páginas web HTML y hojas de estilo CSS por Bartolomé
Sintes Marco
que se distribuye bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 4.0
Internacional (CC BY-SA 4.0).
www.mclibre.org/consultar/htmlcss/css/css-bordes.html 9/9
