CSS Sınır / Kenar - Border

CSS Border Özellikleri

CSS sınır özellikleri ile sınır stilini, sınır rengini ve sınır kalınlığını belirleyebiliriz. Örneğin, şuan okuduğunuz yazının çevresinde ki turuncu div 'in stilinde border renk kodu #EE7621 olarak belirtildi, border kalınlığı 3 piksel olarak belirtildi ve border stili ise " double " olarak belirtildi.

Borderlara stil vermek için " border-style " özelliğini kullanacağız.

Sınır / Kenar Stil Değerleri - Border Style Values

Herhangi bir border sitili kullanmak istemediğimizde none değerini kullanabiliriz, varsayılan değer budur.

dotted

dashed

solid

double

groove

ridge

inset

outset

Örnek kullanımı görelim.

div {
    border-style:solid;
    border-style:1px;
    border-style:gray;
}

Örnek kısa kullanımı görelim.

div {
border:1px gray solid;
}

Sınır / Kenar Genişliği - Border Width

border-width özelliği, sınırın / kenarın genişliğini ayarlamak için kullanılır.

Genişlik, piksel olarak ayarlanır ya da öntanımlı 3 değerler kullanılabilir. thin (ince), medium (orta) veya thick (kalın).

Not: border-width, özelliği tek başına kullanıldığında herhangi bir değişiklik yapmaz. Beraberinde stil (border-style) özelliği de kullanılmalıdır.

Örnek kullanımı görelim.

div {
    border-width:15px;
    border-style:solid;
} div {
    border-width:medium;
    border-style:solid;
}

Örnek kısa kullanımı görelim.

div {
border:15px gray solid;
}

Sınır / Kenar Rengi - Border Color

border-color özelliği, sınırın / kenarın rengini ayarlamak için kullanılır. Renk adı "blue", RGB değeri "rgb(255,0,0)" ve Hex değeri "#ff0000" kullanılabilir. Ayrıca şeffaf (transparent) kullanımda söz konusudur. (border:1px solid transparent;)

Not: border-color, özelliği tek başına kullanıldığında herhangi bir değişiklik yapmaz. Beraberinde stil (border-style) özelliği de kullanılmalıdır.

Örnek kullanımı görelim.

div {
border-style:solid;
border-color:blue;
}

Örnek kısa kullanımı görelim.

div {
border:1px blue solid;
}

CSS Çoklu Sınır / Kenar Stili Kullanımı - Border Individual Sides

Bir kutunun her açısında farklı stil kullanmak mümkündür. (top=üst, right=sağ, bottom=alt, left=sol)

div {
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

Yukarıda ki örnek aşağıda ki şekildede yazılabilir. (İlk stil üst ve alt için ikinci stil ise sağ ve sol içindir.)

div {
border-style:dotted solid;
}

border-style özelliği ile bir satır kodda 4 farklı şekilde stil değeri verilebilmektedir.

border-style:dotted solid double dashed; (üst stil dotted, sağ stil solid, alt stil double, sol stil dashed olur.)
border-style:dotted solid double; (üst stil dotted, sağ ve sol stil solid, alt stil double olur.)
border-style:dotted solid; (üst ve alt stil dotted, sağ ve sol stil solid olur.)
border-style:dotted; (Tüm köşelerin stili dotted olur.)

border-style özelliği yukarıda ki örnekte ki gibi kullanılır ancak border-color ve border-width özellikleri ile birlikte kullanılırsa bu özellik çalışır.