Culoarea Bordurii CSS
Proprietatea border-color setează culoarea celor patru borduri.
Culoarea poate fi dată ca nume (precum red), valoare HEX (precum #ff0000), valoare RGB (precum rgb(255,0,0)), valoare HSL (precum hsl(0, 100%, 50%)), sau transparent.
Notă: Dacă border-color nu este setată, bordura folosește culoarea textului elementului.
Exemplu
Fiecare paragraf are o bordură cu o culoare numită diferită.
<style> intern, creează trei clase de paragraf cu chenar: roșu solid, verde solid și albastru punctat. Fiecare trebuie să seteze și border-style. Adaugă un paragraf pentru fiecare.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<p class="one">Red border</p>
<p class="two">Green border</p>
<p class="three">Blue border</p>
</body>
</html>
Culori Specifice pe Laturi
Proprietatea border-color poate lua de la una la patru valori, pentru bordurile de sus, dreapta, jos și stânga.
Exemplu
Patru valori dau fiecărei laturi propria culoare.
<style>, creează un paragraf cu bordură solidă cu border-color "red green blue yellow" (roșu sus, verde dreapta, albastru jos, galben stânga). Adaugă un paragraf care o folosește.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
</style>
</head>
<body>
<p class="one">Red top, green right, blue bottom, yellow left.</p>
</body>
</html>
Valori HEX
Culoarea bordurii poate fi setată și cu o valoare hexazecimală (HEX).
Exemplu
Culoarea bordurii este setată cu valoarea HEX #ff0000.
<style>, creează un paragraf cu bordură solidă cu border-color #ff0000 (roșu). Adaugă un paragraf care o folosește.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}
</style>
</head>
<body>
<p class="one">Border color set with a HEX value.</p>
</body>
</html>
Valori RGB
Culoarea bordurii poate fi setată și cu o valoare RGB.
Exemplu
Culoarea bordurii este setată cu rgb(255, 0, 0).
<style>, creează un paragraf cu bordură solidă cu border-color rgb(255, 0, 0) (roșu). Adaugă un paragraf care o folosește.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}
</style>
</head>
<body>
<p class="one">Border color set with an RGB value.</p>
</body>
</html>
Valori HSL
Poți seta culoarea bordurii și cu o valoare HSL.
Poți afla mai multe despre HEX, RGB și HSL în capitolele despre Culori CSS.
Exemplu
Culoarea bordurii este setată cu hsl(0, 100%, 50%).
<style>, creează un paragraf cu bordură solidă cu border-color hsl(0, 100%, 50%) (roșu). Adaugă un paragraf care o folosește.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}
</style>
</head>
<body>
<p class="one">Border color set with an HSL value.</p>
</body>
</html>