Bu kılavuzun amacı, yuvarlak köşe kenarlıklarının nasıl oluşturulacağını açıklamaktır. Bunun için öncelikle “ sınır ' Emlak. Öyleyse başlayalım!
CSS'de 'border' Özelliği nedir?
Bir elemanın etrafında kenarlık oluşturmak için “ sınır ' Emlak. Bu özelliği kullanarak, “ stil ”, “ renk ', ve ' Genişlik 'sınırdan.
Sözdizimi
border özelliğinin sözdizimi şu şekilde verilir:
sınır : genişlik stil rengi
Yukarıda verilen değerlerin açıklaması aşağıdadır:
- Genişlik: Kenar genişliğini ayarlamak için kullanılır.
- stil: Noktalı, kesikli, düz veya çift gibi kenarlık stilini ayarlamak için kullanılır.
- renk: Kenarlığın rengini belirler.
İşte “ ' yi uyguladığımız bir örnek sınır ' Emlak.
CSS Kullanarak Kenarlık Nasıl Oluşturulur?
Kenarlık oluşturmak için önce HTML dosyasına bir öğe ekleyin. Bunu yapmak için bir
ve
etiketlerini kullanarak bir başlık ve paragraf ekleyeceğiz:
< gövde >
< div sınıf = 'köşe' >
< h1 > Linux ipucu < / h1 >
< p > CSS'de yuvarlak köşeler < / p >
< / div >
< / gövde >
Daha sonra CSS bölümüne geçeceğiz.
Burada, “ .köşe ”,
.köşe {
sınır : 4 piksel sağlam rgb ( 248 , 6 , 107 ) ;
Genişlik : 250 piksel ;
yükseklik : 150 piksel ;
arka plan rengi : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Yukarıda belirtilen kodu uyguladıktan sonra HTML dosyasına gidin ve çalıştırın. Aşağıdaki sonucu göreceksiniz:
Şimdi, yuvarlak köşe bordürü için kare bordür oluşturacağımız bir sonraki kısma geçeceğiz.
CSS Kullanarak Köşe Nasıl Yuvarlanır?
Yuvarlak köşe kenarlığı oluşturmak için “ sınır yarıçapı Köşe yarıçapını tercihlerinize göre ayarlayabileceğiniz ” özelliği kullanılıyor.
Sözdizimi
border-radius özelliğinin sözdizimi aşağıda verilmiştir:
sınır yarıçapı : değerÖnceki örneğe devam edelim ve yuvarlak köşeler elde etmek için kenarlık yarıçapını ayarlayalım.
Örnek
İçinde ' .köşe ” CSS dosyasının sınıfı, “ değerini ayarlayın sınır yarıçapı ” olarak mülk” 30 piksel ”:
sınır yarıçapı : 30 piksel ;Yukarıdaki satır eklendiğinde, aşağıdaki çıktıyı alacaksınız:
Yukarıda verilen çıktı, border-radius özelliği nedeniyle sınırların başarılı bir şekilde yuvarlak köşelere dönüştürüldüğünü belirtir.
Çözüm
CSS'de ' sınır yarıçapı Kenarlıkların köşelerini değiştirmek için ” özelliği kullanılır. Eğrinin şekli verilen yarıçap değerine göre değişir. Bahsedilen özelliği kullanarak köşenin yarıçapını tercihinize göre ayarlayabilirsiniz. Bu yazımızda border-radius özelliği kullanılarak köşe kenarlarının nasıl yuvarlanacağını bir örnek yardımıyla anlattık.