Generator border-radius

Deklaracja border-radius może przyjąć do czterech niezależnych wartości narożników oraz opcjonalną ośmiowartościową składnię z ukośnikiem dla organicznych krzywych — więcej ruchomych części, niż większość osób sobie uświadamia, dopóki nie potrzebuje czegoś więcej niż prosta zaokrąglona karta. Ten generator pokazuje każdą z tych części na ekranie: cztery suwaki narożników z własnymi jednostkami px lub procent, skrót łączenia narożników dla symetrycznych kształtów oraz tryb bloba dla kształtów, których nie da się wyrazić pojedynczą wartością promienia.

Tryb narożników obejmuje kształty, po które faktycznie sięgamy: połącz wszystkie narożniki jednym suwakiem dla idealnych kół, pigułek i squircle’ów albo rozłącz je, by zaokrąglić tylko górę panelu rozwijanego czy tylko jeden bok karty. Podgląd w szachownicę za kształtem, przełączany między jasnym a ciemnym tłem, wyraźnie pokazuje, które rogi są przycinane przy danym promieniu — ten sam wizualny trik, którego narzędzia plikowe na tej stronie używają do pokazywania przezroczystości.

Tryb blob to druga połowa: ośmiowartościowa składnia CSS z ukośnikiem pozwala, by poziomy i pionowy promień każdego narożnika różniły się od siebie, co właśnie zamienia zaokrąglony prostokąt w organiczny, nieregularny obrys. Naciśnij Randomizuj, by uzyskać nowy kształt w każdej chwili, i skopiuj stojący za nim dokładny CSS — bez eksportu SVG ani zewnętrznych bibliotek. Strony presetów pokrywają zapytania, które ludzie faktycznie wpisują w wyszukiwarkę: idealne koło, przycisk-pigułkę w kształcie stadionu, squircle w stylu iOS oraz gotowy organiczny blob.

Jak każde narzędzie na tej stronie, działa ono w całości w Twojej przeglądarce: bez wysyłania plików, bez konta, a generator działa offline po załadowaniu strony.