Border width, style, color

Border, aktarılan seçiciye çerçeve eklemek üzere kullanılmaktadır. Dilerseniz çerçevenin 4 tarafınıda (sol - sağ - üst - alt) yada dilerseniz sadece sol, sadece sağ vb.. veya sadece sol ve üst, sadece alt ve sağ vb.. gibi çerçeve ekleme imkanınız vardır. Bu amaçta 5 şekilde kullanılmaktadır.

1. border (dört bir alanıda kapsayan çerçeve)
2. border-left (sadece sol çerçeve)
3. border-right (sadece sağ çerçeve)
4. border-top (sadece üst çerçeve)
5. border-bottom (sadece alt çerçeve)

Border özelliğinin genel kullanım kalıbı ise;
border: genişlik çerçeve-tipi çerçeve-rengi;
border: 1px solid black;
Ve border’a ait 3 özellik bulunmaktadır.

1. width
2. style
3. color

1. width

Çerçevenin genişliğini belirtmemiz için kullanacağımız özelliktir. Aşağıdaki değerlerden herhangi birini alabilir.

1. thin
2. medium
3. thick
4. length (px, em, % vb.)

Aşağıdaki tiplere uygun şekilde kullanılabilir;
border-width: 1px;
border-left-width: thick;

2. style

Çerçevenin tipini belirtmemiz için kullanacağımız özelliktir. Aşağıdaki değerlerden herhangi birini alabilir.

1. none
2. hidden
3. dotted
4. dashed
5. solid
6. double
7. groove
8. ridge
9. inset
10. outset

Aşağıdaki tiplere uygun şekilde kullanılabilir;
border-style: dashed;
border-bottom-style: none;

3. color

Çerçevenin rengini belirtmemiz için kullanacağımız özelliktir. Aşağıdaki değerlerden herhangi birini alabilir.

1. rgb renk kodu
2. hex renk kodu
3. renk adı
4. transparent

Aşağıdaki tiplere uygun şekilde kullanılabilir;
border-color: red;
border-top-color: #ff0;
Dilerseniz bunların hepsini toplu olarak bir defada tanaımlayabilirsiniz. Aşağıda border ile ilgili bazı örnekler verilmiştir.
border: 1px solid #aaa;
border-left-width: 2px;
Tüm çerçeveyi önce 1px olarak tanımladık ve sonrasında sol çerçevenin 2px olacağını ifade ettik. Bu sonuçta sağ, üst ve alt çerçeve 1px genişliğinde, sol çerçeve 2px genişliğinde düz ve #aaa renk kodunda çerçeve oluşacaktır.
border-left: 1px solid blue;
border-right: none;
border-top: 1px dotted red;
border-bottom: 1px dashed green;
Bu örneğimizde ise, sol çerçeve 1px genişliğinde düz ve mavi renkli, sağ çerçevenin olmadığını, üst çerçevenin 1px genişliğinde noktalı ve kırmızı renkli, alt çerçeve ise 1px genişliğinde kesik çizgili ve yeşil renkli oluşmaktadır.

Not : Son olarak bazı browserlar farklı yorumlayabilir demiştik. Bu aşamada Internet Explorer (IE) border-style’in bir değeri olan dotted’i dashed olarak yorumlamaktadır.