CSS KENARLIK (BORDER) ÖZELLİKLERİ

Merhaba..

CSS ile tüm HTML elemanlarına kenarlıklar ekleyebilir ve istediğimiz gibi biçimlendirebiliriz. Kenarlık özellikleri tüm kenarlar için uygulanabileceği gibi ayrı ayrı kenarlar içinde uygulanabilir.

BORDER

Border, kenarlık yada çerçeve anlamına gelir. Daha önce HTML'de <img> ve <table> etiketleri için kısıtlı border parametreleri kullanmıştık. Css ile tüm etiketlere kenarlık ekleyebiliyoruz:. Kenarlıklar, kısaca  3 özellik eklenerek oluşturulabilir. 

1. Kenarlık Kalınlığı (border-width)
2. Kenarlık Stili (border-style)
3. Kenarlık Rengi  (border-color)

CSS

.box {
    width:250px;
    height:100px;
    padding:10px;

   /* tüm kenarlıklar*/
    border:5px solid #000;
}

HTML

<div class="box"> Tüm Kenarlıklar </div>

Yukarıdaki tanımlamada kutunun tüm kenarlarına , kenarlık eklenir. Burada;

• ilk değer "5px" kenarlık kalınlığını ,
• 2. değer "solid"  düz kenarlık stilini",
• 3. değer "#000"  ise siyah kenarlık rengini 

belirler..

Kenarlığı sadece kutunun belirli bir kenarına uygulamak istersek , border için yön eklememiz gerekir. 

CSS

.box { width:18%; height:50px;  padding:1rem; float:left; margin-right:1% }
.box1 { border-left:3px solid #000; }  /* sadece sol kenara kenarlık uygulanır */
.box2 { border-top:3px solid #000; }  /* sadece üst kenara kenarlık uygulanır */
.box3 { border-right:3px solid #000; }  /* sadece sağ kenara kenarlık uygulanır */
.box4 { border-bottom:3px solid #000; }  /* sadece alt kenara kenarlık uygulanır */

HTML

<div class="box box1"> border-left </div>
<div class="box box2"> border-top</div>
<div class="box box3"> border-right </div>
<div class="box box4"> border-bottom </div>

BORDER-WIDTH

Kenarlık kalınlığını belirler. Doğrudan yazıldığında tüm kenarlık kalınlıkları belirlenmiş olur. Ancak yön belirtilerek sadece istenen kenarlığın genişliği değiştirilebilir. 

CSS

.box { border:2px solid #4682b4; width:20%; padding:1rem; float:left; margin-right:1% }

.box0 { border-width:5px; }  /* tüm kenar genişliği değişir */
.box1 { border-left-width:5px; }  /* sadece sol kenar genişliği değişir */
.box2 { border-top-width:5px; }  /*  sadece sol kenar genişliği değişir*/
.box3 { border-right-width:5px;}  /*  sadece sol kenar genişliği değişir*/
.box4 {border-left-width:5px; }  /*  sadece sol kenar genişliği değişir */

HTML

<div class="box box0"> border-width </div>
<div class="box box1"> border-left-width </div>
<div class="box box2"> border-top-width</div>
<div class="box box3"> border-right-width </div>
<div class="box box4"> border-bottom-width </div>

Border-width özelliğinin görünür olması için elamanın border-style (kenarlık stili) özelliğinin mutlaka verilmiş olması gerekir.. Yukarıda box genel sınıfı ile tüm kenarlara 2px kalınlığında mavi ve düz kenarlık eklenirken, kutuların ayrı class'larında (box1,box2 vs..)  farklı kenarlarının genişliği değiştirilmiş olur..

BORDER-STYLE

Kenarlık stilini belirler. Doğrudan yazıldığında tüm kenarlık stilleri belirlenmiş olur. Ancak yön belirtilerek sadece istenen kenarlığın stili değiştirilebilir.  Genelde;

• solid  : düz çizgi 
• dashed : kesik Çizgi 
• dotted :  Noktalı Çizgi
• double : Çift çizgi

stilleri kullanılır. Bunların dışında groove, ridge, inset , outset gibi stillerde kullanılabilir..

CSS

.box { border:5px solid #4682b4; width:18%; height:50px;  padding:1rem; float:left; margin-right:1% }

.box1 { border-style:solid; }  /* düz çizgi stili */
.box2 { border-style:dotted; }  /* noktalı çizgi stili */
.box3 { border-style:dashed; }  /*  kesik çizgi stili*/
.box4 { border-style:double;}  /*  çift çizgi stili */
 

HTML

<div class="box box1"> solid </div>
<div class="box box2"> dotted</div>
<div class="box box3"> dashed  </div>
<div class="box box4"> double </div>

Border-style özelliğinin görünür olması için elamanın border-width (kenarlık stili) özelliğinin mutlaka verilmiş olması gerekir.. Yukarıda box genel sınıfı ile tüm kenarlara 5px kalınlığında mavi ve düz (solid) kenarlık eklenirken, kutuların ayrı class'larında (box1,box2 vs..)  farklı stiler uygulanmış olur..

Sadece bazı kenarların stilide değiştirilebilri. Örneğin tüm kenarlık stilleri  solid olarak ayarlan bir divin ,sol kenarlığını kesik çizgi, sağ kenarlığınıda noktalı çizgi yapalım..

.box { 
  width:50%; height:50px;  padding:1rem;

  border:5px solid #4682b4;   /* tüm kenarlıklar 5px , düz ve mavi */
  border-left-style:dotted;   /* sol kenarlık stili noktalı çizgi .. */
  border-right-style:dashed;  /* sağ kenarlık stili kesik çizgi olur.. */
 }

BORDER-COLOR

Kenarlık rengini belirler. Doğrudan yazıldığında tüm kenarlık renkleri belirlenmiş olur. Ancak yön belirtilerek sadece istenen kenarlığın rengide değiştirilebilir.  

CSS

.box { border:5px solid #4682b4; width:18%; height:50px;  padding:1rem; float:left; margin-right:1% }

.box0 { border-color::#933; }  /* tüm kenarların rengi değişir../
.box1 { border-left-color::#933; }  /* sol kenarlığın rengi değişir../
.box2 { border-top-color::#933; }  /* üst kenarlığın rengi değişir../
.box3 { border-right-color::#933; }  /* sağ kenarlığın rengi değişir../
.box4 { border-bottom-color::#933; }  /* alt kenarlığın rengi değişir../

 

HTML

<div class="box box0"> border-color</div>
<div class="box box1"> border-left-color </div>
<div class="box box2"> border-top-color</div>
<div class="box box3"> border-right-color  </div>
<div class="box box4"> border-bottom-color </div>

Border-color özelliğinin görünür olması için elamanın border-width (kenarlık stili) özelliğinin mutlaka verilmiş olması gerekir.. Yukarıda box genel sınıfı ile tüm kenarlara 5px kalınlığında mavi ve düz (solid) kenarlık eklenirken, kutuların ayrı class'larında (box1,box2 vs..)  farklı kenarlara farklı renkler uygulanmış olur..

GENEL ÖRNEK

Border özelliğini kullanarak tüm  farklı  kenarlara farklı border özellikleri ekleyelim. Örneğin;

• sol kenarlık 5px kalınlığında yeşil ve çizgili
• üst kenarlık 15px kalınlığında mavi ve düz
• sağ kenarlık 10px kalınlığında bordo ve noktalı 
• altl kenarlık 8px kalınlığında turuncu ve çift çizgili

yapalım.. Css ile uzun yoldan her bir kenar için ayrı ayrı kalınlık , renk ve stil uygulayabileceğimiz gibi , 3 lü kısaltma ilede kenarlıkları istenildiği gibi  biçimlendirebiliriz.

CSS

.box {  widtH:50%; padding:4rem;
border-left-width:5px;
border-left-style:dashed;
border-left-color: #0a0;

border-top-width:15px;
border-top-style:solid;
border-top-color:#4682b4;

border-right-width:10px;
border-right-style:dotted;
border-right-color:#933;

border-bottom-width:8px;
border-bottom-style:double;
border-bottom-color: orange;
}

yada kısayoldan;

.box {  width:50%; padding:4rem;
  border-left:5px dashed #0a0;
  border-top:15px solid #4682b4;
  border-right:10px dotted #933;
  border-bottom:8px; double orange;
}

HTML

<div class="box"> FARKLI KENARLIKLAR </div>

EKRAN

BORDER RADIUS

Border-radius , kutu köşelerinin ovalleşmesini sağlar. Tüm köşelereuygulanabildiği gibi ayrı ayrıda belirtilebilir. Verilecek değerler px , % , rem olabileceği gibi diğer CSS birimleride olabilir...

Border-radius ile verilen ovalleşmenin görünebilmesi için , kutuya öncelikle bir border eklenmelidir...

CSS

.box {
    width:250px;
    height:100px;
    padding:10px;
    border:5px solid #000;  /*kenarlık */

    border-radius:15px  /* 15px ovalleştirme */
}

HTML

<div class="box"> Oval Köşeler </div>

Yukarıdaki .box class'lı div'in tüm köşeleri 15px değerinde ovalleştirilmiş (yumuşatılmış)  olur..  Eğer tüm köşelere değilde belirli köşeler yumuşatılmak istenirse ,  köşenin yeri belirtilmelidir;

• border-top-left-radius :  üst sol köşe 
• border-top-right-radius :  üst sağ köşe 
• border-bottom-left-radius :  alt sol köşe 
• border-bottom-right-radius :  alt sağ köşe 

Örneğin tüm köşelrei farklı radius değerleri alan bir div yapalım..

CSS

.box {
    width:50%;
    height:100px;
    padding:10px;
    border:5px solid #000;  /*kenarlık */

    border-top-left-radius:30px  /* sol üst köşe 30px ovalleştirme */
    border-top-right-radius:50px  /* sağ üst köşe 50px ovalleştirme */
    border-bottom-left-radius:70px  /* sol alt köşe 70px ovalleştirme */
    border-bottom-right-radius:90px  /* sağ alt köşe 90px ovalleştirme */

}

HTML

<div class="box"> Farklı  Oval Köşeler </div>

Görüşmek Üzere..