Bordes CSS

border-style

Las propiedades de estilo de borde especifican el estilo de línea del borde de un cuadro.

[Sintaxis]

border-style: none | hidden | dotted | dashed | solid | double | groove 

              | ridge | inset | outset

 

Ejemplo

[style.css]

p{
  width: 300px;
  height: 100px;
}
p#dot{ border-style: dotted; }
p#sol{ border-style: solid; }

[index.html]  

<p id="dot">This is a paragraph(dotted)</p>
<p id="sol">This is a paragraph(solid)</p>

 

border-color

Las propiedades de border-color especifican el color del borde de una caja.

[Sintaxis]

border-color: <color> | transparent

- color : Especifica un valor de color:

• color keywords
• color values

Ejemplo

[style.css]

p{
  width: 300px;
  height: 100px;
  border-style: solid;
  border-color: red;
}

[index.html] 

<p>This is a paragraph</p>

 

border-width

Las propiedades de border-width especifican el ancho del área de borde.

[Sintaxis]

border-width: thin | medium | thick | <length>

Ejemplo

[style.css]

p#thin{ border-width: thin; }
p#med{ border-width: medium; }
p#thick{ border-width: thick; }

[index.html] 

<p id="thin">This is a paragraph(thin)</p>
<p id="med">This is a paragraph(medium)</p>
<p id="thick">This is a paragraph(thick)</p>

 

Ver también  8.5 Border properties. 

Reto

1. Estilos de la navegación lateral por el borde.

[style.css]

nav ul li{
  font-size: 1.5em;
  padding-left: 10px;
  margin-bottom: 7px;
  border-left-width: 5px;
  border-left-color: #990066;
  border-left-style: solid;
}

2. Estilos los encabezados de noticias.

[style.css]

#main header{
  padding-left: 10px;
  margin-bottom: 10px;
  border-top-width: 1px;
  border-top-color: #A6A6A6;
  border-top-style: dashed;
  border-bottom-width: 1px;
  border-bottom-color: #A6A6A6;
  border-bottom-style: dashed;
}

 

3. Estilos de la tabla de la página de solicitud de reclutamiento (recruit.html).

[style.css]

#main2 table{
  border-top-width: 1px;
  border-top-color: #A6A6A6;
  border-top-style: solid;
  border-left-width: 1px;
  border-left-color: #A6A6A6;
  border-left-style: solid;
  margin: 0px;
  padding: 0px;
  border-collapse: collapse;
}
#main2 th, #main2 td{
  border-right-width: 1px;
  border-right-color: #A6A6A6;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #A6A6A6;
  border-bottom-style: solid;
  margin: 0px;
  padding: 5px 10px;
}
#main2 th{
  width: 150px;
}
#main2 td{
  width: 410px;
}

 

 Fuente: /www.w3.org/