En los ejemplos de las páginas anteriores, ha visto que es posible especificar un borde diferente para cada lado.
En CSS, también hay propiedades para especificar cada uno de los bordes (arriba, derecha, abajo e izquierda):
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}Resultado :
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>
</body>
</html>
El ejemplo anterior da el mismo resultado que este:
p { border-style: dotted solid;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted solid;
}
</style>
</head>
<body>
<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>
</body>
</html>
Pues así es como funciona:
Si la propiedad class="w3-codespan">border-style tiene cuatro valores:
estilo de borde: sólido con puntos y doble guión;
el borde superior está punteado
el borde derecho es sólido
el borde inferior es doble
el borde izquierdo está discontinuo
Si la propiedad class="w3-codespan">border-style tiene tres valores:
estilo de borde: doble sólido con puntos;
el borde superior está punteado
Los bordes derecho e izquierdo son sólidos.
el borde inferior es doble
Si la propiedad class="w3-codespan">border-style tiene dos valores:
estilo de borde: sólido punteado;
los bordes superior e inferior están punteados
Los bordes derecho e izquierdo son sólidos.
Si la propiedad class="w3-codespan">border-style tiene un valor:
estilo de borde: punteado;
los cuatro bordes están punteados
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
/* Four values */
p.four {
border-style: dotted solid double dashed;
}
/* Three values */
p.three {
border-style: dotted solid double;
}
/* Two values */
p.two {
border-style: dotted solid;
}
/* One value */
p.one {
border-style: dotted;
}
</style>
</head>
<body>
<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>
</body>
</html>
La propiedad class="w3-codespan">border-style se utiliza en el ejemplo anterior. Sin embargo, también funciona con class="w3-codespan">ancho de borde y class="w3-codespan">color-borde.