Css Ders 8 | Kenarlıklar

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

CSS Kenarlık Stili

border-style Kenar çizgilerin stilini belirtir

Aşağıdaki değerler kullanılabilir:

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

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 Kenar Genişliği

border-width Özelliği dört kenar genişliğini belirtir.

Genişlik, belirli bir boyut olarak (px, pt, cm, em, vb. Cinsinden) veya önceden tanımlanmış üç değerden biri kullanılarak ayarlanabilir: ince, orta veya kalın:

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

Specific Yan Genişlikler

border-width Özelliği dört değer alabilir:

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

p.two{
  border-style: solid;
  border-width: 25px 10px 4px 35px;
}

CSS Kenar Rengi

border-color Özelliği dört kenar çizgisinin rengini ayarlamak için kullanılır.

Renk şu şekilde ayarlanabilir:

• name – “kırmızı” gibi bir renk adı belirtin
• HEX – “# ff0000” gibi bir HEX değeri belirtin
• RGB – “rgb (255,0,0)” gibi bir RGB değeri belirtin
• HSL – “hsl (0,% 100,% 50)” gibi bir HSL değeri belirtin
• transparent

Not: Eğer border-color ayarlanmamışsa color elementin rengini alır.

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

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

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

Specific Yan Renkler

border-color Özelliği dört değer alabilir:

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

HEX Değerleri

Kenarlığın rengi ayrıca bir onaltılık değer (HEX) kullanılarak da belirtilebilir:

p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}

RGB Değerleri

Kenarlığın rengi RGB kullanılarak da belirtilebilir:

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* red */
}

HSL Değerleri

HSL değerlerini de kullanabilirsiniz:

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* red */
}

CSS Kenarlığın Tek Tarafı

Üst kısımdaki örneklerden her bir taraf için farklı bir bordür belirlemenin mümkün olduğunu gördünüz.

CSS’de, sınırların her birini (üst, sağ, alt ve sol) belirtmek için özellikler de vardır:

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

Yukarıdaki örnek şununla aynı sonucu verir:

p {
  border-style: dotted solid;
}

Bir örnek daha verelim:

p {
  border-style: dotted solid double dashed;
}

p {
  border-style: dotted solid double;
}

p {
  border-style: dotted solid;
}

p {
  border-style: dotted;
}

CSS Kenarlık – Kısa Kod

Üst kısımda gördüğünüz gibi, sınırlarla uğraşırken dikkate alınması gereken birçok özellik var.

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

border Özelliği şu bireysel kenar özellikler için bir kestirme özelliktir:

• border-width
• border-style (zorunlu)
• border-color

p {
  border: 5px solid red;
}

Ayrıca, yalnızca bir taraf için tüm bireysel kenar özelliklerini de belirtebilirsiniz:

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

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

CSS Yuvarlak Kenarlıklar

border-radius Özelliği, bir elemana yuvarlak kenarlık eklemek için kullanılır:

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