Generator border-radius CSS
Twórz wizualnie złożone wartości border-radius w CSS. Niezależna kontrola każdego rogu.
border-radius: 20px 20px 20px 20px;
Jak korzystać z tego narzędzia
- 1
Drag the TL, TR, BR, and BL sliders to set each corner radius in pixels (0 to 100).
- 2
Watch the indigo preview box update live as you change each corner.
- 3
Read the generated border-radius declaration in the code box below the sliders.
- 4
Click Copy CSS to put the declaration on your clipboard, then paste it into your stylesheet.
Czym jest generator border-radius CSS?
Właściwość border-radius w CSS przyjmuje do czterech wartości, po jednej na róg, w kolejności: lewy górny, prawy górny, prawy dolny i lewy dolny. Łącz różne promienie, aby uzyskać organiczne kształty przypominające krople, asymetryczne karty lub style dymków dialogowych. To narzędzie pozwala dostosować każdy róg za pomocą suwaków i obserwować wynik w czasie rzeczywistym.
Typowe przypadki użycia
Rounding the corners of a card or panel component and copying the exact pixel value into a stylesheet.
Creating an asymmetric shape, like a chat bubble, by giving one corner a small radius and the others a larger one.
Prototyping a pill or capsule button by pushing all four sliders toward their maximum.
Matching a design spec that calls for different radii on the top corners versus the bottom corners.
Quickly testing how a corner radius looks at different pixel sizes before committing a value to a design system.
Teaching or demonstrating how the four-value border-radius shorthand maps to each corner.
Najczęściej zadawane pytania
A co z promieniami eliptycznymi?▼
Powiązane narzędzia
Konwerter kolorów (HEX/RGB/HSL)
Konwertuj kolory między formatami HEX, RGB i HSL. Wybierz kolor wizualnie lub wprowadź wartości ręcznie.
Generator box-shadow CSS
Twórz wizualnie wartości box-shadow w CSS. Podgląd w czasie rzeczywistym i kopiowanie wygenerowanego CSS.
Generator gradientów CSS
Twórz liniowe i radialne gradienty CSS. Wybieraj kolory w sposób wizualny i kopiuj wygenerowany kod CSS.
Generator krzywych przyspieszenia cubic-bezier
Twórz krzywe przyspieszenia cubic-bezier dla CSS. Zawiera standardowe ustawienia predefiniowane.
Generator palet kolorów
Generuj harmonijne palety kolorów z dowolnego koloru bazowego. Obsługuje schematy dopełniające, analogiczne, triadyczne i monochromatyczne.
Generator CSS clamp()
Generuj płynne, responsywne wartości CSS za pomocą clamp(). Skaluje się gładko między rozmiarem minimalnym a maksymalnym w zakresach widoku.