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;
}