CSS Border Radius Oluşturucu
Köşe değerlerini ve birimini belirleyerek CSS border-radius kodunu anında oluşturun.
Aracı çalıştır
CSS border-radius oluşturucu, web sayfalarındaki kutu, buton ve görsel köşelerini yuvarlamak için gereken CSS bildirimini anında hazırlar. Sol üst, sağ üst, sağ alt ve sol alt köşeler için bağımsız sayısal değerler belirleyebilir ya da tüm köşelere eşit kavis değerleri atayabilirsiniz. Araç, varsayılan olarak her köşe için 10 değerini ve piksel (px) birimini kullanır. Tasarım tercihinize göre piksel yerine yüzde (%), rem veya em gibi farklı CSS ölçü birimleri de belirleyebilirsiniz. Girdiğiniz köşe değerleri standart CSS saat yönü kuralına uygun biçimde, sol üst köşeden başlayarak saat yönünde birleştirilir. Dört köşeye farklı kavis oranları vererek asimetrik kart tasarımları, yuvarlak düğmeler veya yumuşak hatlı arayüz bileşenleri oluşturabilirsiniz. Sonuç panelinde oluşturulan tek satırlık CSS kodunu doğrudan kopyalayıp stil dosyanıza ekleyebilirsiniz. Sıfır girilen köşeler düz bırakılırken diğer köşelerde belirtilen kavis korunur. Bu sayede CSS kodunu elle yazmadan hızlı ve hatasız biçimde elde edebilirsiniz.
Kullanım
- Sol üst, sağ üst, sağ alt ve sol alt alanlarına istediğiniz köşe yarıçapı değerlerini girin.
- Köşe değerlerinin yanında kullanılacak CSS ölçü birimini (örneğin px, %, rem) belirleyin.
- İşlemi başlattıktan sonra sonuç alanında oluşturulan border-radius kod satırını inceleyin.
- Oluşturulan CSS bildirimini kopyalayarak stil dosyanıza veya bileşen kodunuza yapıştırın.
Örnekler
- Dört köşeye de 16 değeri ve px birimi girildiğinde çıktı: border-radius: 16px 16px 16px 16px;
- Sol üst 20, sağ üst 0, sağ alt 20, sol alt 0 ve px birimi girildiğinde çıktı: border-radius: 20px 0px 20px 0px;
- Tüm köşelere 50 değeri ve % birimi girildiğinde çıktı: border-radius: 50% 50% 50% 50%;
SSS
Köşe değerlerini boş bırakırsam ne olur?
Boş bırakılan veya değer girilmeyen her köşe için varsayılan olarak 10 değeri kullanılır.
Piksel dışında hangi birimleri kullanabilirim?
Birim alanına %, rem, em, vh veya vw gibi geçerli CSS ölçü birimlerini yazabilirsiniz. Alan boş bırakıldığında px birimi geçerli olur.
Köşe değerlerinin sıralaması CSS kuralına nasıl yansır?
Değerler standart CSS kuralına göre sırasıyla sol üst, sağ üst, sağ alt ve sol alt biçiminde saat yönünde dizilir.
Bir köşeyi tamamen düz bırakmak için ne yapmalıyım?
Düz kalmasını istediğiniz köşenin değer alanına 0 yazmanız yeterlidir.