CSS Dersleri 7 - Border (Çerçeve)


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Border (Çerçeve) konusunu öğreneceğiz.

CSS border özelliği, bir etiketin çerçevesinin stilini, genişliğini ve rengini belirlemenize olanak tanır. Border deyimini daha önce HTML derslerinde Tablolar konusunda görmüştük, aslında HTML'de her etikete çerçeve vermeniz mümkündür.

border-style : Çerçeve Stili

CSS "border-style" özelliği, etiketin ne tür bir kenarlığa sahip olacağını belirtir.

Bu kenarlıklar daha önce CSS'de tanımlanmıştır :

  • dotted - Noktalı Çerçeve
  • dashed - Kesikli Çerçeve
  • solid - Düz Çerçeve
  • double - Çift Çerçeve
  • groove - 3 Boyutlu Çerçeve Özelliği
  • ridge - 3 Boyutlu Çerçeve Özelliği
  • inset - 3 Boyutlu Çerçeve Özelliği
  • outset - 3 Boyutlu Çerçeve Özelliği
  • none - Çerçevesiz
  • hidden - Gizli Çerçeve

CSS "border-style" özelliği , bir ile dört değer içerebilir (üst çerçeve, sağ çerçeve, alt çerçeveve sol çerçeve için). Yani her kenar için ayrı çerçeve stili tanımlanabilir.

CSS border-style kullanımı : 

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Border-style özelliğini tanımlanmadığı sürece border özelliğine ait diğer özellikler çalışmayacaktır.

Bir etikete ait 4 kenar için farklı stiller tanımlanabilir , bunun iki yöntemi vardır :

1. Yöntem 

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

2. Yöntem 

/* 4 Değer */
p {
  border-style: dotted solid double dashed;
}

/* 3 Değer */
p {
  border-style: dotted solid double;
}

/* İki Değer */
p {
  border-style: dotted solid;
}

/* Bir Değer */
p {
  border-style: dotted;
}

border-width : Çerçeve Genişliği

CSS "border-width" özelliği, çerçevelerin kenar kalınlıklarını belirtir.Genişlik, belirli bir boyut olarak (px, pt, cm, em, vb. Cinsinden) veya önceden tanımlanmış üç değerden biri kullanılarak ayarlanabilir: thin, medium veya thick.

CSS border-width kullanımı :

p.bir {
  border-style: solid;
  border-width: 5px;
}

p.iki {
  border-style: solid;
  border-width: medium;
}

p.üc {
  border-style: dotted;
  border-width: 2px;
}

p.dort {
  border-style: dotted;
  border-width: thick;
}

Eğer her kenara farklı bir genişlik vermek istiyorsak aşağıda ki yapıyı kullanabiliriz :

p.bir{
  border-style: solid;
  border-width: 10px 20px; /* 10px üst ve alt, 20px sağ ve sol kenar*/
}

p.iki {
  border-style: solid;
  border-width: 15px 5px ;/* 15px üst ve alt, 5px sağ ve sol kenar*/
}

p.uc {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px üst , 10px sağ, 4px alt, 35px sol kenar */
}

border-color : Çerçeve Rengi

CSS "border-color" özelliği, dört çerçevenin rengini ayarlamak için kullanılır.

p.bir{
  border-style: solid;
  border-color: red;
}

p.iki{
  border-style: solid;
  border-color: green;
}

p.uc{
  border-style: dotted;
  border-color: blue;
}

Border-color özelliği bir ile dört değere sahip olabilir (üst çerçeve, sağ çerçeve, alt çerçeveve sol çerçeve).

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* kırmızı üst, yeşil sağ, mavi alt ve sarı sol kenar*/
}

CSS Border Kısa Kullanımı 

CSS'de border özelliklerini ayrı ayrı yazmak yerine tek bir satırda yazabiliriz.Bunun için sadece "border" özelliğini kullanmak yeterlidir. Bu özelliğin değerlerine sırasıyla :

  • border-width
  • border-style (zorunlu)
  • border-color

CSS Border Kısa Kullanımı :

p {
  border: 5px solid red;
}

CSS border kısa kullanımlarını sadece belirli kenarlara özel olarak kullanabilirsiniz.

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

border-radius : Çerçeve Yuvarlaklığı

CSS "border-radius" özelliği, bir etikete yuvarlatılmış kenarlıklar eklemek için kullanılır. Değer olarak bir ölçü girilmelidir.

CSS border-radius kullanımı :

p {
  border: 2px solid red;
  border-radius: 5px;
}

Kenarlar için özel kullanımı :

#ornek1 {
  border: 2px solid red;
  border-radius: 25px;
}

#ornek2 {
  border: 2px solid red;
  border-radius: 50px 20px;
}

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla
  • C# Dersleri

    C# Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 100 Ders
    Dil Türkçe
    Güncelleme 04/2024
    Derse Başla