Dokumentacja CSS z przykładami: Obramowanie

Q: Jak dodać obramowanie w CSS?

Użyj skrótu z szerokością, stylem i kolorem: border: 2px solid #2563eb;. Najważniejszy jest styl: bez niego styl obramowania to none i nic nie zostanie narysowane.

Q: Jak zrobić zaokrąglone rogi w CSS?

Użyj border-radius: border-radius: 8px; zaokrągla wszystkie cztery rogi. border-radius: 50%; na kwadracie daje koło, a duża wartość, na przykład 999px, kształt pigułki. Zaokrągla też tło, nawet bez obramowania.

Q: Jak dodać obramowanie tylko z jednej strony?

Użyj właściwości boku: border-bottom: 2px solid #e5e7eb; albo border-inline-start dla strony, od której zaczyna się tekst, co działa też w językach pisanych od prawej do lewej.

Skrót border

border rysuje linię wokół elementu, między jego paddingiem a marginesem. Skrót przyjmuje trzy części w dowolnej kolejności: szerokość, styl i kolor.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

Część	Pełna właściwość	Wartości	Domyślnie
Szerokość	`border-width`	`1px`, `0.2em`, `thin`, `medium`, `thick`	`medium`
Styl	`border-style`	`solid`, `dashed`, `dotted`, `double` i inne	`none`
Kolor	`border-color`	Dowolny kolor	`currentColor` (kolor tekstu)

Stylu nie można pominąć. Jego wartość domyślna to none, więc border: 2px #2563eb; nie rysuje zupełnie nic. Jeśli pominiesz kolor, obramowanie przyjmie kolor tekstu elementu.

Style obramowania

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double potrzebuje co najmniej 3px, żeby pokazać dwie linie. groove, ridge, inset i outset cieniują kolor, żeby wyglądał trójwymiarowo, i nieco różnią się między przeglądarkami. hidden wygląda jak none; różnią się tylko w tabelach ze scalonymi obramowaniami, które omawia strona o obramowaniu tabeli w HTML.

Jeden bok naraz

Każdy bok ma własny skrót (border-top, border-right, border-bottom, border-left), a każda część ma pełne właściwości dla boków, takie jak border-top-color. Wersje logiczne, border-inline-start i border-block-end, podążają za kierunkiem tekstu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color, border-width i border-style przyjmują od jednej do czterech wartości w tej samej kolejności zgodnej z ruchem wskazówek zegara co padding: góra, prawo, dół, lewo.

Zaokrąglone rogi z border-radius

border-radius zaokrągla rogi obramowania i tła, więc działa także na elementach bez obramowania.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

Wartość	Wynik
`border-radius: 8px`	Wszystkie rogi zaokrąglone o 8px
`border-radius: 50%`	Koło na kwadratowym elemencie, elipsa na prostokącie
`border-radius: 999px`	Pigułka: krótkie boki stają się pełnymi półkolami
`border-radius: 8px 0`	Lewy górny i prawy dolny 8px, pozostałe dwa proste
`border-top-left-radius: 12px`	Tylko jeden róg
`border-radius: 50% / 25%`	Rogi eliptyczne: promień poziomy / promień pionowy

Dziecko z tłem może wystawać poza zaokrąglone rogi rodzica. overflow: hidden na rodzicu przycina je do krzywej.

Border a outline

Outline wygląda jak obramowanie, ale jest rysowany poza nim i nie zajmuje miejsca, więc jego dodanie niczego nie przesuwa. Dlatego przeglądarki używają go do pokazania fokusu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

	Border	Outline
Zajmuje miejsce	Tak, wlicza się w rozmiar pudełka	Nie
Osobno dla boków	Tak (`border-top`, ...)	Nie, zawsze dookoła
Uwzględnia `border-radius`	Tak	Tak, w obecnych przeglądarkach
Odsunięcie od pudełka	Nie	Tak, `outline-offset`
Typowe zastosowanie	Wygląd	Wskaźniki fokusu, debugowanie

Częste błędy

Brak stylu obramowania. border: 1px #111827; i border-color: red; nic nie rysują. Dodaj solid (albo inny styl).
Obramowanie, przez które układ skacze przy najechaniu. Zarezerwuj miejsce przezroczystym obramowaniem albo użyj outline lub box-shadow.
Pominięcie obramowania w szerokości. Element z width: 100% i obramowaniem wystaje z kontenera przy content-box. Użyj box-sizing: border-box.
border-radius z dzieckiem wystającym z rogów. Dodaj overflow: hidden do zaokrąglonego rodzica.
Usuwanie obrysu fokusu przez outline: none. Osoby korzystające z klawiatury go potrzebują; zmień jego wygląd zamiast go usuwać.

Najczęściej zadawane pytania

Jak dodać obramowanie w CSS?

Użyj skrótu z szerokością, stylem i kolorem: border: 2px solid #2563eb;. Najważniejszy jest styl: bez niego styl obramowania to none i nic nie zostanie narysowane.

Dlaczego moje obramowanie CSS się nie wyświetla?

Prawie zawsze dlatego, że nie ustawiono stylu obramowania. Samo border: 2px #2563eb; albo border-color: red; nic nie rysuje, bo domyślny border-style to none. Dodaj solid, dashed albo inny styl.

Jak zrobić zaokrąglone rogi w CSS?

Użyj border-radius: border-radius: 8px; zaokrągla wszystkie cztery rogi. border-radius: 50%; na kwadracie daje koło, a duża wartość, na przykład 999px, kształt pigułki. Zaokrągla też tło, nawet bez obramowania.

Jak dodać obramowanie tylko z jednej strony?

Użyj właściwości boku: border-bottom: 2px solid #e5e7eb; albo border-inline-start dla strony, od której zaczyna się tekst, co działa też w językach pisanych od prawej do lewej.

Czym różni się border od outline?

Obramowanie jest częścią pudełka: zajmuje miejsce i zmienia rozmiar elementu. Outline jest rysowany poza obramowaniem, nie zajmuje miejsca, nie da się go ustawić osobno dla boku i to jego przeglądarki używają do pokazania fokusu. Oba w obecnych przeglądarkach uwzględniają border-radius.

Powiązane zagadnienia