CSS Border Radius Oluşturucu
Karmaşık CSS border-radius değerlerini görsel olarak oluşturun. Her köşe için bağımsız kontrol.
border-radius: 20px 20px 20px 20px;
Bu araç nasıl kullanılır
- 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.
CSS Border Radius Oluşturucu nedir?
CSS'in border-radius özelliği, her köşe için bir tane olmak üzere en fazla dört değer kabul eder; sıra sol üst, sağ üst, sağ alt ve sol alt şeklindedir. Damla biçimli organik şekiller, asimetrik kartlar veya konuşma balonu stilleri için farklı yarıçapları birleştirin. Bu araç, her köşeyi kaydırıcılarla ayarlamanıza ve sonucu gerçek zamanlı görmenize olanak tanır.
Yaygın kullanım örnekleri
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.
Sıkça sorulan sorular
Peki ya eliptik yarıçaplar?▼
İlgili araçlar
Renk Dönüştürücü (HEX/RGB/HSL)
Renkleri HEX, RGB ve HSL biçimleri arasında dönüştürün. Bir rengi görsel olarak seçin veya değerleri elle girin.
CSS Box Shadow Oluşturucu
CSS box-shadow değerlerini görsel olarak oluşturun. Gerçek zamanlı önizleyin ve oluşturulan CSS'i kopyalayın.
CSS Renk Geçişi Oluşturucu
Doğrusal ve radyal CSS renk geçişleri oluşturun. Renkleri görsel olarak seçin ve oluşturulan CSS'i kopyalayın.
Cubic Bezier Hızlanma Eğrisi Oluşturucu
CSS için cubic-bezier hızlanma (easing) eğrileri oluşturun. Standart hazır ayarları içerir.
Renk Paleti Üreteci
Herhangi bir temel renkten uyumlu renk paletleri üretin. Tamamlayıcı, analog, üçlü ve monokromatik şemaları destekler.
CSS Clamp() Üreteci
clamp() ile akışkan ve duyarlı CSS değerleri üretin. Viewport aralıkları boyunca minimum ve maksimum boyutlar arasında düzgünce ölçeklenir.