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 turuncudiv '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.
Ö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ğıdaki ş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.
KAYNAK: http://www.sercaneraslan.com/css/index.php?page=sinir_kenar
