Köşe Yuvarlama Oluşturma

Dört köşe ölçüsünü seçip canlı önizlemeli CSS köşe yuvarlama kodunu oluşturun.

  • Ücretsiz
  • Kayıt yok
  • Dosyalar tarayıcıda işlenir

Saat yönünde birinci köşe.

Saat yönünde ikinci köşe.

Saat yönünde üçüncü köşe.

Saat yönünde dördüncü köşe.

Piksel sabit, yüzde oranlıdır.

Sonuç burada görünecek

Çıktı
CSS
Fiyat
Ücretsiz
Kayıt
gerekmez, dosyalar tarayıcıda işlenir

Nasıl kullanılır?

  1. Dört köşe sayısını alanlara yazıp birimi seçin.
  2. Bağlı kip gerekiyorsa tüm köşelere aynı değeri verin.
  3. Oluştur düğmesine basın, önizlemeyi görüp kodu kopyalayın.

Köşe yuvarlama kodu üretirken bilmeniz gerekenler

Dört köşe sırası ve kısayol

Kısayol saat yönünde dizilir; sol üst, sağ üst, sağ alt, sol alt sırası 10px 20px 30px 40px yazımıyla kurulur. Dört değer eşitse tek değer yeterlidir, 16px yazımı dört köşeyi aynı yapar. İki değer yazıldığında birinci sol üst ile sağ altı, ikinci sağ üst ile sol altı tutar.

Butonlarda 6 piksel standart, kartlarda 12 ile 16 piksel arası dengelidir. Aşırı yuvarlama metinle kenarı birleştirir, 24 piksel üstü küçük kartlarda içeriyi sıkıştırır. Önizleme kutusu kare tutulur, dört köşe farkı büyümeden görülür.

Piksel ve yüzde birimi

Piksel sabit kalır, yüzde kutu ölçüsüne göre oranlanır. Kare kutuda yüzde 50 tam daire verir, dikdörtgende aynı değer elips yapar. Avatar için kare görselde yüzde 50 kullanın, hap buton için 9999 piksel yazın, tarayıcı yarım kapsüle kelepçeler.

V1 aralığı pikselde 0 ile 200, yüzdede 0 ile 50 arasındadır. Küçük girişte yüzde 4 ile 8 bandı yumuşak durur, büyük afişte piksel 20 ile 32 bandı okunur. Birim satırda tek tutulur, piksel ile yüzde aynı satırda karışmaz.

Hap, daire ve kart desenleri

Hap buton uzun kenara bakılmadan 9999 piksel ile kurulur, kısa kenar yarıçapa kelepçelenir. Daire avatar 100 piksel karede yüzde 50 ile yapılır, dikdörtgen fotoğrafta aynı değer elips verir. Standart kart 12 piksel dört köşeyle dengelidir, modal pencere 16 piksel ile yumuşar.

Yapışkan not ve etiket gibi küçük parçalarda 4 ile 8 piksel yeterlidir, rozet ve damga gibi dairesel parçalarda yüzde 50 şarttır. Blog görseli kırpmasında 8 piksel köşe, galeri ızgarasında 12 piksel ritim kurar. Her desen tek satırda üretilir, sayfadaki her bileşen ayrı hazırlanır.

Ne zaman kullanılır?

Kayıt formu, fiyat kartı ve açılır pencere sert köşeden yorulduğunda bu üretici kullanılır. Tasarımcı dört ölçü verir, geliştirici birimi piksel tutup kodu stil dosyasına taşır. Toplantıda karar değişirse kaydırıcı oynatılır, sayfa yenilenmeden önizleme güncellenir.

Logo kutusu ve düğme aynı satırda yer alacaksa kart 12 piksel, düğme 9999 piksel yapılır ve hiyerarşi korunur. Tek seferde bir satır üretilir, sayfadaki her bölüm için ölçü ayrı hazırlanır. Eliptik eğri gerekiyorsa v1 dışıdır, dört değerli dairesel yazımla yetinin.

Sık sorulan sorular

Border radius oluşturma ücretsiz mi?

Evet, dört köşeli radius üretimi ücretsizdir ve kayıt istemez. Değerleri değiştirip dilediğiniz kadar önizleme üretebilirsiniz. Sayfa yenilense bile araç aynı şekilde çalışır; kota veya ödeme ekranı çıkmaz.

Yazdığım ölçüler sunucuya gönderilir mi?

Hayır, yazdığınız sayılar yalnızca tarayıcınızda işlenir ve sunucuya gönderilmez. Müşteri tasarımı gibi gizli çalışmalarda işiniz bitince alanları temizleyin. Sonuç ekranda görünür, kayda alınmaz.

Dört köşe hangi sırayla yazılır?

Saat yönünde sol üst, sağ üst, sağ alt ve sol alt dizilir. 10px 20px 30px 40px yazımı her köşeyi ayrı tutar. Dört değer eşitse tek değer yazmanız yeterlidir, araç kısayolu kendisi sadeleştirir ve kopyalanabilir satır verir.

Hap buton için hangi değer girilir?

Uzun butonda 9999 piksel yazın, tarayıcı kısa kenara kelepçeler ve hap kapsül oluşur. Yüzde 50 dikdörtgende elips yapar, hap için piksel kullanın. Önizlemede buton oranını deneyip ardından kodu stil dosyanıza taşıyın.

Piksel mi yüzde mi seçmeliyim?

Sabit bileşenlerde piksel, oranlı şekillerde yüzde seçin. Kart ve girişte 12 piksel tutarlıdır, avatar ve rozette yüzde 50 orantılıdır. V1 satırda tek birim kullanır, ikisini aynı satırda karıştırmayın, gerektiğinde iki ayrı üretim yapın.