CSS Sınır / Kenar - Border Ayarlamaları

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