border-style Özelliği

border-style özelliği, kenarlık stilini tüm taraflar için aynı anda veya her bir taraf için ayrı ayrı belirler. Aşağıdaki özellikler için bir kısaltma özelliğidir: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sözdizimi

cssseçici {
  border-style: değer;
}

Değerler

Değer	Açıklama
`solid`	Düz çizgi.
`dotted`	Noktalı kenarlık.
`dashed`	Kesik çizgili kenarlık.
`ridge`	Kabartılmış çizgi şeklinde kenarlık.
`double`	Çift çizgi şeklinde kenarlık. Etkiyi görebilmek için kenarlık kalınlığı en az `3px` olmalıdır.
`groove`	İçe doğru oyuk kenarlık.
`inset`	İçe gömülü kenarlık.
`outset`	Dışa kabartılmış kenarlık.
`none`	Kenarlık yok.

Varsayılan değer: none.

Değer Sayısı

Özellik, boşlukla ayrılmış olarak 1, 2, 3 veya 4 değer alabilir:

Sayı	Açıklama
`1`	Tüm taraflar için aynı tip.
`2`	İlk değer üst ve alt için, ikincisi - sol ve sağ kenarlıklar için.
`3`	İlk değer üst için, ikincisi - sol ve sağ kenarlıklar için, üçüncüsü - alt için.
`4`	İlk değer üst kenarlık için, ikincisi - sağ kenarlık için, üçüncüsü - alt kenarlık için, dördüncüsü - sol kenarlık için.

Örnek . solid Değeri

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek . dotted Değeri

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek . dashed Değeri

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dashed;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek . ridge Değeri

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: ridge;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek . double Değeri

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: double;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek . groove Değeri

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: groove;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek . inset Değeri

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: inset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek . outset Değeri

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: outset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Bu örnekte, öğenin farklı tarafları için farklı kenarlık tipleri belirlenmiştir:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted dashed dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Şimdi ise öğenin farklı tarafları için farklı kenarlık kalınlığı ve rengi belirlenmiştir:

html<div id="elem"></div>

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Şimdi üst ve alt kenarlık için solid tipi, sağ ve sol kenarlık için ise dotted tipi belirlenmiştir:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Ayrıca Bakınız

border-color özelliği,
kenarlık rengini belirler
border-width özelliği,
kenarlık kalınlığını belirler
border özelliği,
kenarlık için kısaltma özelliğidir