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