Css Borders

Css border html nesnelerinin etrafına kenarlık eklemek için kullanılır.

Border' a verebileceğimiz 3 özellik vardır. Bunlar border-style, border-width ve border-color özellikleridir.

1-) border-style: çizgi türünü temsil eder.

** Border-style' nin alabileceği değerler;

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

Örnek 1 için tıklayınız.

2-) border-width: çizgi kalınlığını temsil eder.

<p class="one">Some text.</p>
<p class="two">Some text.</p>

.one {
    border-style: solid;
    border-width: 5px;
    padding:5px;
}
.two {
    border-style: solid;
    border-width: 2px;
    padding:5px;
}

Örnek 2 için tıklayınız.

3-) border-color: çizgi rengini temsil eder.

.one {
    border-style: solid;
    border-width: 5px;
    padding:5px;
    border-color:red;
}

.two {
    border-style: solid;
    border-width: 2px;
    padding:5px;
    border-color:red blue green yellow;
}

Örneğimizde border-color dediğimizde 4 köşeden bir renklendirme yapabiliyoruz. Alternatif olarak her köşe için bir renklendirme de yapabiliriz.

** border-color: red blue green yellow; (top,right,bottom,left şeklinde saat yönünde)

Örnek 3 için tıklayınız.

Örneklerimizde olduğu gibi bir border uygulamak istediğimizde border-style, border-width ve border-color özelliklerini tek tek belirtiyoruz ki bunun daha kısa bir yolu var.

border: çizgi kalınlığı çizgi türü çizgi rengi, şeklinde 3 özelliği de aynı satırda verebiliriz.

.one {
    border:1px solid red;
}
.two {
    border:5px solid green;
}

Örnek 4 için tıklayınız.