border vs outline
border jest częścią modelu pudełkowego i powiększa element, a outline rysuje obwódkę na zewnątrz, bez wpływu na układ strony i rozmiar.
Porównanie w tabeli
#Wpływa na rozmiar elementu
Można stylować każdą stronę osobno
Zaokrąglenie przez border-radius
Odsunięcie od elementu
Domyślne użycie przez przeglądarkę
Typowe użycie
Przykład
#.card {
border: 2px solid #3f3f46;
}
.card:focus-visible {
outline: 3px solid #a78bfa;
outline-offset: 3px;
}<div class="stage">
<button class="card" type="button" style="padding: 10px 16px; border-radius: 10px; background: #18181b; color: #fff;">Kliknij albo naciśnij Tab</button>
</div>Definicja i zastosowanie
#Właściwość border to pełnoprawna część modelu pudełkowego. Dolicza się do rozmiaru elementu, chyba że włączysz box-sizing: border-box, a każdą stronę możesz stylować osobno przez border-top, border-right i tak dalej. Zaokrąglenie narożników przez border-radius dotyczy właśnie obramowania.
outline rysowana jest na zewnątrz obramowania i nigdy nie wpływa na rozmiar ani układ sąsiednich elementów. Nie da się jej stylować osobno na każdej stronie: to zawsze jeden prostokąt wokół całego elementu. Nowoczesne przeglądarki zaokrąglają ją razem z border-radius, a outline-offset pozwala odsunąć ją od krawędzi.
Przeglądarki domyślnie używają outline do pokazywania fokusu klawiatury, więc to naturalny wybór dla własnych wskaźników fokusu i do debugowania układu, bo nigdy nie przesuwa treści. border zostaw do widocznych ramek kart, pól i przycisków, które są częścią projektu.
Składnia
#border: <grubość> <styl> <kolor>;
outline: <grubość> <styl> <kolor>;Więcej przykładów
#.box-outline { outline: 6px solid #f59e0b; }<div class="stage" style="display: flex; gap: 8px;">
<div class="box">1</div>
<div class="box box-outline">2</div>
<div class="box">3</div>
</div>Mimo grubej obwódki elementy 1 i 3 stoją w tym samym miejscu, co bez niej.
.box-border { border: 6px solid #f59e0b; }<div class="stage" style="display: flex; gap: 8px;">
<div class="box">1</div>
<div class="box box-border">2</div>
<div class="box">3</div>
</div>Ten sam element z obramowaniem o tej samej grubości odpycha sąsiadów 1 i 3, żeby zrobić sobie miejsce.
Dobre praktyki
#- Do wskaźnika fokusu klawiatury użyj
outline, najlepiej z:focus-visible, żeby nie przesuwać layoutu. - Jeśli potrzebujesz innej grubości obramowania na jednej stronie, musi to być
border. Outline jest tylko jednym prostokątem. outline-offsetodsuwa obwódkę od elementu bez zmiany jego rozmiaru.
Powiązane hasła
#- borderSkrót, który ustawia grubość, styl i kolor obramowania.
- outlineRysuje obwódkę wokół elementu, która nie zajmuje miejsca w układzie.
- :focus-visiblePasuje do elementu z fokusem wtedy, gdy przeglądarka uzna, że wskaźnik powinien być widoczny, np. przy nawigacji klawiaturą.
- border-radiusZaokrągla rogi elementu.
- outline-offsetOdsuwa obwódkę od krawędzi elementu albo wsuwa ją do środka, nie zmieniając układu strony.
Widzisz błąd albo brakuje przykładu? Napisz do nas.