CSS Kenarlık (Border)

CSS Kenarlık (Border)

CSS kenarlık özellikleri, bir öğenin kenarlığının stilini, genişliğini ve rengini belirlemenize olanak tanır.

CSS Kenarlık Stili

border-style özelliği, ne tür bir kenarlığın görüntüleneceğini belirler.

Aşağıdaki değerlere izin verilir:

• dotted - Noktalı bir kenarlık tanımlar.
• dashed - Kesikli bir kenarlık tanımlar.
• solid - Düz bir kenarlık tanımlar.
• double - Çift kenarlık tanımlar.
• groove - 3B oluklu bir kenarlık tanımlar. Etki, kenarlık rengi değerine bağlıdır.
• ridge - 3B çıkıntılı kenarlık tanımlar. Etki, kenarlık rengi değerine bağlıdır.
• inset - 3B iç metin kenarlığı tanımlar. Etki, kenarlık rengi değerine bağlıdır.
• outset - Bir 3B başlangıç kenarlığı tanımlar. Etki, kenarlık rengi değerine bağlıdır.
• none - Sınır tanımlamaz.
• hidden - Gizli bir kenarlık tanımlar.

border-style özelliği bir ila dört değere sahip olabilir (üst kenarlık, sağ kenarlık, alt kenarlık ve sol kenarlık için).

Ö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;}

Örnek Çıktısı:

CSS Kenarlık Genişliği

border-width özelliği, dört sınırın genişliğini belirtir.

Genişlik, belirli bir boyut olarak (px, pt, cm, em, vb. olarak) veya önceden tanımlanmış üç değerden biri kullanılarak ayarlanabilir: Bu üç değer şu şekildedir; thin, medium, or thick (ince, orta veya kalın).

Örnek:

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

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

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

Örnek Çıktısı:

CSS Kenarlık Rengi

border-color özelliği, kenarların rengini ayarlamak için kullanılır.

Kenarlık rengi belirlerken, aşağıdaki listedeki renk belirtme yollarını kullanabilirsiniz.

• ad - "kırmızı" gibi bir renk adı belirtebilirsiniz.
• HEX - "#ff0000" gibi bir HEX değeri belirtebilirsiniz.
• RGB - "rgb(255,0,0)" gibi bir RGB değeri belirtebilirsiniz.
• HSL - "hsl(0, %100, %50)" gibi bir HSL değeri belirtebilirsiniz.
• transparent yazılarak

Not: border-color ayarlamadıysanız öğenin rengi neyse kenarlık da aynı renk olacaktır.

Örnek:

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

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

p.three {
  border-style: dotted;
  border-color: blue;
}

Örnek Çıktısı:

CSS Kenarlığı - Farklı Kenarlık Belirleme

Önceki örneklerden, her bir kenar için farklı bir kenar belirlemenin mümkün olduğunu gördünüz.

CSS'de, kenarların her biri için (üst, sağ, alt ve sol) kenarlığı belirlemek mümkündür.

Örnek:

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

Örnek Çıktısı:

CSS Kenarlığı - Steno (Shorthand) Özelliği

Daha önceki örneklerde gördüğünüz gibi, kenarlarla uğraşırken göz önünde bulundurulması gereken birçok özellik var.

Kodu kısaltmak için, tüm farklı kenar özelliklerini tek bir özellikte belirtmek de mümkündür.

Aşağıdaki örnekte farklı kenar özellikleri nasıl kısaltabileceğinizi görebilirsiniz.

Örnek:

p {
  border: 5px solid red;
}

Örnek Çıktısı

31.08.2021 - Onur KUL

CSS Yuvarlak (Oval) Kenarlık

border-radius özelliği, bir öğeye yuvarlak (oval) kenarlıklar eklemek için kullanılır.

Örnek:

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

Örnek Çıktısı:

Yuvarlak (Oval) Kenarlık

Tüm CSS Kenarlık Özellikleri