Za pomocą stylu CSS zdefiniowano obramowanie pojedyncze o następujących kolorach krawędzi: <pre class="code-block">border: solid 1px; border-color: red blue green yellow;</pre> Jakie kolory będą miały poszczególne krawędzie?

W tym pytaniu kluczowe jest zrozumienie skróconej składni własności `border-color` w CSS. Gdy podamy cztery wartości kolorów, przeglądarka interpretuje je zawsze w tej samej kolejności: góra (top), prawa (right), dół (bottom), lewa (left). Dokładnie tak samo działa to jak przy `margin` czy `padding`. Czyli zapis `border-color: red blue green yellow;` oznacza: górna krawędź – czerwona, prawa – niebieska, dolna – zielona, lewa – żółta. Styl `border: solid 1px;` określa tylko typ obramowania (ciągła linia) i grubość (1px), ale bez kolorów. Kolory są dopiero dodane przez `border-color`. W praktyce bardzo często używa się tej skróconej notacji, np. żeby wyróżnić jedną krawędź: `border-color: transparent transparent red transparent;` – daje to efekt podkreślenia tylko od dołu. Z mojego doświadczenia w front‑endzie lepiej zapamiętać prostą zasadę: przy czterech wartościach zawsze idziemy zgodnie z ruchem wskazówek zegara, zaczynając od góry: top → right → bottom → left. To się powtarza przy wielu własnościach CSS. Warto też wiedzieć, że można podać mniej wartości: jedną (wszystkie krawędzie ten sam kolor), dwie (góra/dół i prawa/lewa), trzy (góra, prawa/lewa, dół). Jednak w tym zadaniu są cztery, więc każda krawędź ma osobny kolor. Takie podejście jest zgodne ze specyfikacją CSS (box model) i jest powszechnie stosowane w projektach produkcyjnych do tworzenia np. ramek, strzałek, wyróżnień nagłówków czy kart.