CSS Border Sides

Obsah

    Zobrazit obsah

Ohraničení CSS - jednotlivé strany

Z příkladů na předchozích stránkách jste viděli, že je možné zadat a pro každou stranu jiný okraj.

V CSS jsou také vlastnosti pro specifikaci každého z okrajů (top, vpravo, dole a vlevo):

Příklad

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

Výsledek :

Different Border Styles

Zkuste to sami →

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

Výše uvedený příklad dává stejný výsledek jako tento:

Příklad

p {	border-style: dotted solid;
}

Zkuste to sami →

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

Funguje to takto:

Pokud má vlastnost class="w3-codespan">border-style čtyři hodnoty:

  • styl ohraničení: tečkovaná plná dvojitá přerušovaná;

    • horní okraj je tečkovaný

    • pravý okraj je pevný

    • spodní okraj je dvojitý

    • levý okraj je přerušovaný

Pokud má vlastnost class="w3-codespan">border-style tři hodnoty:

  • styl ohraničení: tečkovaný plný dvojitý;

    • horní okraj je tečkovaný

    • pravé a levé okraje jsou pevné

    • spodní okraj je dvojitý

Pokud má vlastnost class="w3-codespan">border-style dvě hodnoty:

  • styl ohraničení: tečkovaná plná;

    • horní a spodní okraje jsou tečkované

    • pravé a levé okraje jsou pevné

Pokud má vlastnost class="w3-codespan">border-style jednu hodnotu:

  • styl ohraničení: tečkovaný;

    • všechny čtyři okraje jsou tečkované

Příklad

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

Zkuste to sami →

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

Ve výše uvedeném příkladu je použita vlastnost class="w3-codespan">border-style. Funguje však také s class="w3-codespan">šířka okraje a class="w3-codespan">barva ohraničení.