CSS border-style özelliği

Tanım ve Kullanım

border-style özelliği, elementin tüm kenar çizgilerinin tarzını ayarlamak veya her bir kenara ayrı olarak kenar çizgisi tarzı ayarlamak için kullanılır.

Bu değer none değilse kenar çizgisi görünür olabilir.

Örnek 1

border-style:dotted solid double dalgalı;
  • Üst kenar çizgisi noktali
  • Sağ kenar çizgisi kesik çizgili
  • Alt kenar çizgisi çift çizgili
  • Sol kenar çizgisi dalgalı

Örnek 2

border-style:dotted solid double;
  • Üst kenar çizgisi noktali
  • Sağ kenar çizgisi ve sol kenar çizgisi kesik çizgili
  • Alt kenar çizgisi çift çizgili

Örnek 3

border-style:dotted solid;
  • Üst kenar çizgisi ve alt kenar çizgisi noktali
  • Sağ kenar çizgisi ve sol kenar çizgisi kesik çizgili

Örnek 4

border-style:dotted;
  • Tüm 4 kenar çizgisi noktali

Ayrıca bakınız:

CSS Eğitimi:CSS kenarlık

HTML DOM referans el kitabı:borderStyle özelliği

Örnek

4 adet çerçeve tarzı ayarlamak:

p
  {
  border-style:solid;
  }

Deneyin

CSS dilbilgisi

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Özellik değeri

Değer Açıklama
none Sıfır çerçeve tanımlar.
hidden "none" ile aynıdır. Ancak tablolar için bu durum geçerli değildir, çünkü tablolar için "hidden" çerçeve çatışmasını çözmek için kullanılır.
dotted Noktalı çerçeve tanımlar. Çoğu tarayıcıda gerçek çizgi olarak görüntülenir.
dashed Boş çizgi tanımlar. Çoğu tarayıcıda gerçek çizgi olarak görüntülenir.
solid Düz çizgi tanımlar.
double İki çizgi tanımlar. Çizgi genişliği, çerçeve-genişliği değerine eşittir.
groove 3D çukur çerçeveleri tanımlar. Etkisi, çerçeve-renk değerine bağlıdır.
ridge 3D damarlı çerçeveleri tanımlar. Etkisi, çerçeve-renk değerine bağlıdır.
inset 3D inset çerçeveleri tanımlar. Etkisi, çerçeve-renk değerine bağlıdır.
outset 3D outset çerçeveleri tanımlar. Etkisi, çerçeve-renk değerine bağlıdır.
inherit Ebeveyn elementten çerçeve tarzını miras almalıdır.

Açıklama

En az öngörülebilir çerçeve tarzı double'dır. Bu, iki çizginin genişliği ve bu çizgiler arasındaki boşluk, çerçeve-genişliği değeri olarak tanımlanır. Ancak, CSS normu, bu çizgilerden birinin diğerinden daha kalın olup olmadığını veya çizgiler arasındaki boşluğun çizgiden daha kalın olup olmadığını söylemez. Tüm bu durumlar, kullanıcı aracısı tarafından belirlenir ve yaratıcılar bu karar üzerinde hiçbir etkisi yoktur.

Teknik ayrıntılar

Öntanımlı değer: belirtilmemiş
Mirasçılık: hayır
Sürüm: CSS1
JavaScript dilbilgisi: object.style.borderStyle="dotted double"

Daha fazla örnek

Dört kenar çerçeve tarzı ayarlamak
Bu örnek, nasıl dört kenar çerçeve tarzı ayarlanacağını gösterir.
Her kenara farklı bir çerçeve ayarlamak
Bu örnek, elementin her kenarına farklı bir çerçeve nasıl ayarlanacağını gösterir.

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5