Generator border-radius
Zaokrąglaj rogi i twórz organiczne kształty blob.
- Natychmiast
- Za darmo
- Prywatnie (przetwarzane lokalnie)
- Bez rejestracji
Od klasycznych zaokrąglonych rogów do modnych blobów
Tryb 4 rogi pokrywa codzienność: przyciski, karty, awatary. Tryb blob używa składni ośmiu wartości dla miękkich, organicznych kształtów bardzo modnych w ilustracjach i tłach dekoracyjnych.
-
Wybierz tryb
4 rogi dla prostego zaokrąglenia, blob dla organicznego kształtu.
-
Dostosuj suwaki
Przycisk „Losowo” generuje unikalny blob jednym kliknięciem.
-
Skopiuj CSS
Pełna właściwość border-radius, gotowa do wklejenia.
Składnia w dwóch przykładach
| Tryb | Wygenerowany CSS |
|---|---|
| 4 równe rogi | border-radius: 16px; |
| Domyślny blob | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| Przed ukośnikiem / | Poziome promienie 4 rogów |
| Po ukośniku / | Pionowe promienie 4 rogów |
Wszystko obliczane jest w przeglądarce. Aby przyciąć obraz do kształtu, dodaj overflow: hidden na kontenerze.
Najczęstsze pytania
Jak zaokrąglić tylko jeden róg?
W trybie „4 rogi” ustaw suwak wybranego rogu, a pozostałe zostaw na 0. Wygenerowany CSS wymienia promienie w kolejności lewy-górny, prawy-górny, prawy-dolny, lewy-dolny; gdy wszystkie wartości są równe, narzędzie zapisuje jedną wartość.
Czym jest składnia blob z ośmioma wartościami?
border-radius przyjmuje promienie poziome i pionowe oddzielone ukośnikiem „/”. Na przykład „30% 70% 70% 30% / 30% 30% 70% 70%” nadaje czterem rogom asymetryczne promienie — to właśnie tworzy te miękkie organiczne kształty.
Dlaczego procenty zamiast pikseli?
Procenty są względne do rozmiaru elementu: blob zachowuje proporcje przy każdym wymiarze. Piksele lepiej pasują do stałego zaokrąglenia, jak przycisk czy karta o stałych rogach.
Czy border-radius przycina zawartość?
Obramowanie i tło podążają za zaokrągleniem, ale zawartość potomna może wystawać. Dodaj „overflow: hidden” na elemencie, aby obrazy i treść były przycięte do zaokrąglonych rogów.