Kurs HTML

Wprowadzenie: Nadawanie koloru linii obramowania

Ostatnim z trzech podstawowych aspektów obramowania (po szerokości i stylu) jest jego kolor. Właściwość border-color służy do określania koloru linii obramowania.

Podobnie jak border-width, sama właściwość border-color nie wystarczy, aby obramowanie było widoczne. Musi być również ustawiony styl obramowania (border-style) na wartość inną niż none.

Wartości border-color

Właściwość border-color akceptuje wartości kolorów zdefiniowane w CSS, tak samo jak background-color czy color:

• Nazwy kolorów: red, blue, green, lightgray itp.
• Wartości HEX: #FF0000, #00F, #333333.
• Wartości RGB/RGBA: rgb(255, 0, 0), rgba(0, 0, 255, 0.5).
• Wartości HSL/HSLA: hsl(120, 100%, 50%), hsla(0, 100%, 50%, 0.7).
• transparent: Obramowanie będzie przezroczyste. Może być użyteczne do tworzenia "niewidzialnego" obramowania, które zajmuje miejsce, ale nie jest widoczne (np. aby zapobiec przesunięciom przy dodawaniu widocznego obramowania w stanie :hover).
• currentColor: (Domyślne) Jeśli kolor obramowania nie zostanie jawnie ustawiony, domyślnie przyjmuje on bieżącą wartość właściwości color (koloru tekstu) elementu.

<div class="box color-example red-border">Czerwone (nazwa)</div>
<div class="box color-example hex-border">Niebieskie (HEX)</div>
<div class="box color-example rgba-border">Półprzezroczyste zielone (RGBA)</div>
<div class="box color-example hsl-border">Żółte (HSL)</div>
<div class="box color-example transparent-border">Przezroczyste</div>
<div class="box color-example currentcolor-border">currentColor (domyślne - jak tekst)</div>Kopiuj

.color-example {
  padding: 15px;
  margin-bottom: 10px;
  border-style: solid;
  border-width: 4px;
}

.red-border   { border-color: red; }
.hex-border   { border-color: #0000FF; }
.rgba-border  { border-color: rgba(0, 128, 0, 0.5); background-color: #eee; /* Tło dla widoczności przezroczystości */ }
.hsl-border   { border-color: hsl(60, 100%, 50%); }
.transparent-border { border-color: transparent; background-color: #eee; /* Tło dla widoczności */ }
.currentcolor-border { 
  color: purple; /* Ustawiamy kolor tekstu */
  /* border-color nie jest ustawiony, więc dziedziczy 'purple' z 'color' */
}Kopiuj

Ustawianie koloru dla poszczególnych krawędzi

Tak jak w przypadku border-width i border-style, można ustawić różne kolory dla każdej z czterech krawędzi obramowania za pomocą jednej właściwości border-color, podając od jednej do czterech wartości:

• Jedna wartość: (np. border-color: blue;) - Wszystkie cztery krawędzie mają ten sam kolor.
• Dwie wartości: (np. border-color: red green;) - Góra i dół: red, lewa i prawa: green.
• Trzy wartości: (np. border-color: red green blue;) - Góra: red, lewa i prawa: green, dół: blue.
• Cztery wartości: (np. border-color: red green blue yellow;) - Góra: red, prawo: green, dół: blue, lewo: yellow.

.multi-color-border {
  border-style: solid;
  border-width: 5px;
  /* Góra: red, Prawa: green, Dół: blue, Lewa: yellow */
  border-color: red green blue yellow;
  padding: 20px;
}Kopiuj

Istnieją również indywidualne właściwości do ustawiania koloru konkretnej krawędzi:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Każda z nich przyjmuje tylko jedną wartość koloru.

.individual-colors {
  border-style: solid;
  border-width: 3px;
  border-top-color: orange;
  border-right-color: purple;
  border-bottom-color: limegreen;
  border-left-color: dodgerblue;
  padding: 20px;
}Kopiuj