CSS-kantsidor


Innehållsförteckning

    Visa innehållsförteckning


CSS-gräns - enskilda sidor

Av exemplen på föregående sidor har du sett att det är möjligt att ange en olika gränser för varje sida.

I CSS finns det också egenskaper för att specificera var och en av gränserna (överst, höger, botten och vänster):

Exempel

p
{
   
border-top-style: dotted;
   
border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Resultat :

Different Border Styles

Prova själv →

<!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>


Exemplet ovan ger samma resultat som detta:

Exempel

p {	border-style: dotted solid;
}

Prova själv →

<!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>


Så här är hur det fungerar:

Om egenskapen class="w3-codespan">border-style har fyra värden:

  • kantstil: prickad fast dubbelstreckad;

    • övre kanten är prickad

    • höger kant är fast

    • bottenkanten är dubbel

    • vänster kant är streckad

Om egenskapen class="w3-codespan">border-style har tre värden:

  • kantstil: prickad hel dubbel;

    • övre kanten är prickad

    • höger och vänster kanter är fasta

    • bottenkanten är dubbel

Om egenskapen class="w3-codespan">border-style har två värden:

  • kantstil: prickad fast;

    • övre och nedre kanterna är prickade

    • höger och vänster kanter är fasta

Om egenskapen class="w3-codespan">border-style har ett värde:

  • kantstil: prickad;

    • alla fyra kanterna är prickade

Exempel

 /* 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; 
}

Prova själv →

<!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>


Egenskapen class="w3-codespan">border-style används i exemplet ovan. Det fungerar dock också med class="w3-codespan">kantbredd och class="w3-codespan">kantfärg.