Puede expresarse como un tamaño o con alguno de estos valores:
thinmediumthick
Si no se pone, su valor por omisión es:
medium.
Puede expresarse con alguno de estos valores:
noneSin borde.
dottedEl borde es una serie de puntos redondos.
dashedEl borde es una serie de guiones de esquinas cuadradas.
solidEl borde es una sola línea sólida.
doubleEl 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.
grooveEl borde parece como si estuviera tallado dentro de la superficie.
ridgeEl borde parece como si saliera de la superficie.
insetParece como si el contenido dentro del borde estuviera hundido en la superficie.
outsetParece como si el contenido dentro del borde saliera de la superficie.
Si no se pone, su valor por omisión es:
none.
Se especifica como un color cualquiera.
Si no se pone, su valor por omisión es el color del texto del elemento.
border-top-widthAncho del borde en la parte superior de la caja.
border-top-styleEstilo del borde en la parte superior de la caja.
border-top-colorColor 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-widthAncho del borde en el lado izquierdo de la caja.
border-left-styleEstilo del borde en el lado izquierdo de la caja.
border-left-colorColor del borde en el lado izquierdo de la caja.
border-right-widthAncho del borde en el lado derecho de la caja.
border-right-styleEstilo del borde en el lado derecho de la caja.
border-right-colorColor del borde en el lado derecho de la caja.
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-topAncho, estilo y color del borde en la parte superior de la caja.
border-bottomAncho, estilo y color del borde en la parte inferior de la caja.
border-leftAncho, estilo y color del borde en el lado izquierdo de la caja.
border-rightAncho, estilo y color del borde en el lado derecho de la caja.
borderAncho, estilo y color del borde único en las partes izquierda, derecha, superior e inferior de la caja.
| 1 | <!DOCTYPE html> |
| 2 | <html lang="es"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" |
| 6 | content="width=device-width"> |
| 7 | <title>Bordes</title> |
| 8 | <style> |
| 9 | h1 { |
| 10 | border-top-width: thin; |
| 11 | border-top-style: solid; |
| 12 | border-top-color: cyan; |
| 13 | border-left: |
| 14 | medium dashed red; |
| 15 | border-right: |
| 16 | thick dotted green; |
| 17 | border-bottom: |
| 18 | thick double blue |
| 19 | } |
| 20 | |
| 21 | nav { |
| 22 | border: thick groove cyan |
| 23 | } |
| 24 | |
| 25 | p { |
| 26 | border: thick ridge pink |
| 27 | } |
| 28 | |
| 29 | div { |
| 30 | border: thick inset yellowgreen |
| 31 | } |
| 32 | |
| 33 | footer { |
| 34 | border: thick outset orange |
| 35 | } |
| 36 | </style> |
| 37 | </head> |
| 38 | <body> |
| 39 | <h1>Bordes</h1> |
| 40 | <nav>Groove</nav> |
| 41 | <p>Ridge</p> |
| 42 | <div>Inset</div> |
| 43 | <footer>Outset</footer> |
| 44 | </body> |
| 45 | </html> |