Bordură CSS - Laturi Individuale
Poți seta o bordură diferită pentru fiecare latură a unui element.
CSS are proprietăți separate pentru fiecare latură: border-top-style, border-right-style, border-bottom-style și border-left-style.
Poți obține același rezultat cu proprietatea prescurtată border-style, care ia una până la patru valori:
- Patru valori (
dotted solid double dashed): sus, dreapta, jos, stânga. - Trei valori (
dotted solid double): sus, apoi dreapta și stânga, apoi jos. - Două valori (
dotted solid): sus și jos, apoi dreapta și stânga. - O valoare (
dotted): toate cele patru laturi.
Acest lucru funcționează și cu border-width și border-color.
Proprietăți pentru laturi individuale
Fiecare latură este setată cu propria proprietate.
Prompt
O pagină HTML care stilizează separat fiecare latură a bordurii.
Într-un bloc intern
<style>, stilizează un paragraf cu border-top-style punctat, border-right-style solid, border-bottom-style punctat și border-left-style solid. Adaugă un paragraf pentru a o arăta.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<p>Different Border Styles</p>
</body>
</html>
Prescurtare cu două valori
Prescurtarea border-style: dotted solid dă același rezultat.
Prompt
O pagină HTML care obține același rezultat pe laturi folosind prescurtarea border-style.
Într-un bloc intern
<style>, dă unui paragraf border-style "dotted solid" astfel încât sus și jos sunt punctate, iar stânga și dreapta sunt solide. Adaugă un paragraf pentru a o arăta.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border-style: dotted solid;
}
</style>
</head>
<body>
<p>Different Border Styles</p>
</body>
</html>
De la una la patru valori
Numărul de valori schimbă ce laturi primesc ce stil.
Prompt
O pagină HTML care arată cum se comportă border-style cu patru, trei, două și o valoare.
Într-un bloc intern
<style>, creează patru clase de paragraf: "dotted solid double dashed", "dotted solid double", "dotted solid" și "dotted". Adaugă un paragraf etichetat pentru fiecare, astfel încât diferența să fie clară.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.four {
border-style: dotted solid double dashed;
}
p.three {
border-style: dotted solid double;
}
p.two {
border-style: dotted solid;
}
p.one {
border-style: dotted;
}
</style>
</head>
<body>
<p class="four">Four values: dotted top, solid right, double bottom, dashed left.</p>
<p class="three">Three values: dotted top, solid sides, double bottom.</p>
<p class="two">Two values: dotted top and bottom, solid sides.</p>
<p class="one">One value: all four sides dotted.</p>
</body>
</html>