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, 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.
.box {
width:250px;
height:100px;
padding:10px;
/* tüm kenarlıklar*/
border:5px solid #000;
}
<div class="box"> Tüm Kenarlıklar </div>
Yukarıdaki tanımlamada kutunun tüm kenarlarına , kenarlık eklenir. Burada;
belirler..
Kenarlığı sadece kutunun belirli bir kenarına uygulamak istersek , border için yön eklememiz gerekir.
.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 */
<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>
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.
.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 */
<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..
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;
stilleri kullanılır. Bunların dışında groove, ridge, inset , outset gibi stillerde kullanılabilir..
.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 */
<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.. */
}
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.
.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../
<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..
Border özelliğini kullanarak tüm farklı kenarlara farklı border özellikleri ekleyelim. Örneğin;
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.
.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;
}
<div class="box"> FARKLI KENARLIKLAR </div>
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...
.box {
width:250px;
height:100px;
padding:10px;
border:5px solid #000; /*kenarlık */
border-radius:15px /* 15px ovalleştirme */
}
<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;
Örneğin tüm köşelrei farklı radius değerleri alan bir div yapalım..
.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 */
}
<div class="box"> Farklı Oval Köşeler </div>
Görüşmek Üzere..
Toplam 30 Makale
Lütfen yorumlarınızda saygılı, yapıcı ve anlaşılır bir dil kullanın.
Küfür, hakaret ya da spam içerikler onaylanmaz.