Softonic

Generator border-radius CSS

Krok 1 / 2 Generuj CSS
Wyniki

border-radius wygląda prosto, dopóki nie spróbujesz wyjaśnić, dlaczego 50% na kwadracie daje koło, a 50% na prostokącie daje owal. Ten generator pozwala wprowadzić wartość dla każdego z czterech rogów, wybrać jednostkę (px, % lub rem) i skopiować dokładnie taki skrócony zapis, jaki tworzy. Przydatny do kształtów przycisków, zaokrąglonych rogów kart, przycisków w kształcie pigułki (pill) i asymetrycznych rogów.

Jak zbudować border-radius

  1. 1

    Ustaw każdy róg

    Wpisz promień dla rogów: lewego górnego, prawego górnego, prawego dolnego i lewego dolnego.

  2. 2

    Wybierz jednostkę

    Piksele px (stały rozmiar), procent % (względem elementu) lub rem (względem rozmiaru czcionki elementu głównego).

  3. 3

    Wygeneruj CSS

    Kliknij Generate CSS, aby utworzyć skrócony zapis.

  4. 4

    Skopiuj regułę

    Skopiuj skrócony zapis `border-radius` i wklej go do arkusza stylów.

Kolejność w zapisie skróconym

border-radius: top-left top-right bottom-right bottom-left;

Tak samo jak przy margin / padding: zgodnie z ruchem wskazówek zegara, zaczynając od lewego górnego rogu. Pominięte wartości odzwierciedlają przeciwległy róg. Dlatego border-radius: 10px 20px; oznacza 10px dla lewego górnego i prawego dolnego rogu oraz 20px dla prawego górnego i lewego dolnego.

Czego ten generator nie robi

Ustawia jeden promień na róg, więc nigdy nie tworzy rogów eliptycznych (formy z dwiema wartościami i ukośnikiem, jak border-radius: 20px 10px / 5px 15px;) ani właściwości rozpisanych, takich jak border-top-left-radius. Jeśli ich potrzebujesz, napisz CSS ręcznie.

Procent a piksele

Jednostka Zachowanie
px Stała wartość, nie skaluje się wraz z rozmiarem elementu
% Procent szerokości elementu (poziomo) i wysokości (pionowo)
em Skaluje się wraz z rozmiarem czcionki elementu
rem Skaluje się wraz z rozmiarem czcionki elementu głównego (root)

50% na kwadratowym elemencie = koło. Na prostokącie 200×100 50% to promień poziomy 100px plus promień pionowy 50px = elipsa.

Najczęstsze kształty

Kształt CSS
Koło (kwadrat) border-radius: 50%;
Pigułka (pill) border-radius: 9999px; (dowolna wartość ≥ połowy wysokości)
Zaokrąglona karta border-radius: 8px; lub 12px
Dymek czatu border-radius: 18px 18px 0 18px; (ogonek w prawym dolnym rogu)
Delikatne border-radius: 2px; lub 4px

Reguła „połowy wysokości“ dla pigułek

Przycisk w kształcie pigułki (pill) to prostokąt, którego lewy i prawy bok są idealnymi półkolami. Aby uzyskać to niezawodnie, ustaw border-radius na co najmniej połowę wysokości elementu. Użycie 9999px (lub dowolnej bardzo dużej wartości) jest bezpieczne, ponieważ przeglądarka ogranicza promień do rzeczywistej geometrii.

Interakcja z overflow

Domyślnie border-radius przycina tylko tło, obramowanie i cień (box-shadow). Aby przyciąć elementy podrzędne (obrazy, elementy zagnieżdżone) do zaokrąglonego kształtu, dodaj:

overflow: hidden;

albo użyj isolation: isolate + overflow: hidden, aby objąć także konteksty nakładania (stacking contexts).

Uwaga o dostępności

Sam border-radius nie powoduje problemów z dostępnością, ale skrajne zaokrąglenie elementów interaktywnych (pigułek, chipów) nie powinno zmniejszać obszaru dotyku. Niezależnie od zaokrąglenia rogów, przyciski powinny mieć co najmniej 44×44px (zalecenie WCAG).

Najczęściej zadawane pytania

Ponieważ procentowy border-radius jest mierzony jako „% szerokości“ w poziomie i „% wysokości“ w pionie, na elemencie niekwadratowym daje to elipsę. Aby uzyskać koło, element musi być kwadratowy albo trzeba użyć wartości pikselowych odpowiadających jego wymiarom.

Domyślnie tylko tło, obramowanie i cień (box-shadow). Elementy podrzędne nie są przycinane, dopóki nie dodasz również overflow: hidden do elementu nadrzędnego.

Można go animować między wartościami liczbowymi: transition: border-radius 200ms; działa dla pikseli i procentów. Animacja między złożonym zapisem eliptycznym a prostym promieniem może dawać zaskakujące klatki pośrednie; jeśli wygląda dziwnie, przetestuj i uprość stan początkowy oraz końcowy.

Specyfikacja nie ustala górnego limitu, ale przeglądarki ograniczają efektywny promień do połowy krótszego boku elementu. Użycie border-radius: 9999px na przycisku o wysokości 40px daje pigułkę, przeglądarka po cichu ogranicza wartość do 20px.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Generator losowych liter

Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Próbnik kolorów HEX

Wybierz lub wpisz kolor HEX i sprawdź RGB, HSL, przybliżone CMYK, luminancję względną oraz kontrast z bielą i czernią.