CSS Border Kullanımı

Web tasarım derslerimizin CSS bölümüne kenarlıklarla devam ediyoruz. Herkese iyi dersler.

CSS Border (Kenarlık)

CSS’te border özelliğini bir öğenin kenarlıklarına şekil, renk ve kalınlık gibi değerler vermek için kullanırız.

Tam olarak ne yapmak istediğimizi anlamanız açısından birkaç örnek verelim, ardından da kodlarına geçelim.

CSS’te Kenarlık Stili

border-style HTML öğelerine verdiğimiz kenarlıklara stil vermek için kullanılır.

Aşağıdaki değerlerle HTML öğelerinin kenarlıklarına stil verebiliriz:

• dotted – Noktalı kenarlık vermek için kullanılır
• dashed – Kesikli kenarlık vermek için kullanılır
• solid – Düz kenarlık vermek için kullanılır
• double – Çift kenarlık vermek için kullanılır
• groove – 3B oluklu kenarlık vermek için kullanılır
• ridge – 3B çıkıntılı kenarlık vermek için kullanılır
• inset – 3B içe gömük kenarlık vermek için kullanılır
• outset – 3B dışa çıkık kenarlık vermek için kullanılır
• none – Kenarlık vermez
• hidden – Gizli bir kenarlık vermek için kullanılır

border-style bir ile dört arasında değer alabilir (üst, sağ, alt, sol).

Örnek:

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

CSS Kenarlık Kalınlığı

border-width özelliği ile kenarlıklara kalınlık verilebilir.

Kalınlığı px, pt, cm, em gibi birimlerle ya da önceden tanımlanmış değerlerden biriyle verebilirsiniz: thin (ince), medium (orta) veya thick (kalın).

Kenarlıklar dediğimiz gibi 1 ile 4 arasında değer alabilir (üst, sağ, alt, sol).

Örnek kodlar:

p.bir {
    border-style: solid;
    border-width: 5px;
}

p.iki {
    border-style: solid;
    border-width: medium;
}

p.uc {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

Kenarlık Rengi

border-color özelliği ile kenarlıklarımıza renk vererek daha şık görünümler elde edebiliriz.

Renk şu şekillerde ayarlanabilir:

• İsim – “red” gibi bir renk adı verilerek
• Hex – “#ff0000” gibi renk kodları verilerek
• RGB – “rgb(255,0,0)” gibi bir RGB renk değeri verilerek
• transparent yazılarak

border-color da diğer kenarlık özellikleri gibi 1 ile 4 arasında değer alabilir (üst, sağ, alt, sol).

Eğer border-color tanımlı değilse öğe, yazı rengini kenarlık rengi olarak kullanır.

p.bir {
    border-style: solid;
    border-color: red;
}

p.iki {
    border-style: solid;
    border-color: green;
}

p.uc {
    border-style: solid;
    border-color: red green blue yellow;
}

Bireysel Kenarlıklar

Şimdiki örneğimizde her kenarlığa (üst, sağ, alt, sol) farklı bir kenarlık stili vereceğiz.

Yukarıdaki örnekle aynı sonucu verecek kodumuz (iki değer verildiğinde birincisi üst ve alt, ikincisi sağ ve sol kenarlara uygulanır):

p {
    border-style: dotted solid;
}

Dersimizin başında göstermiş olduğumuz örneklerin de kodlarını verip dersimizi bitirelim.

Sol tarafta 6px kenarlık kalınlığına sahip bir paragraf oluşturma kodu:

p {
    border-left: 6px solid red;
    background-color: lightgrey;
}

Alta kenarlık verilmiş HTML öğesi kodu:

p {
    border-bottom: 6px solid red;
    background-color: lightgrey;
}

Yuvarlak Kenarlık

border-radius özelliği ile kenarlıklarımızı yumuşatabiliriz.

p {
    border: 2px solid red;
    border-radius: 7px;
}

Bugünlük dersimizin sonuna geldik.
Bir diğer dersimizde görüşmek üzere.