CSS `border-style` Özelliği

CSS border-style özelliği; 4 kenarın birden desenini belirler. 4 kenarın kısaltması olarak kullanılabildiği gibi her kenar için ayrı ayrı desen değeri verilebilmesini de sağlar.

19.06.2017 / 19.05.1919^?

Yazar: SonDevrim szdfsdfsdf sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd

SonDevrimBu Yazı

Toplam351101586

Bugün903

`border-style` Özelliği Temel Özellikler

CSS Yazımı :

border-style: <desen>;

<desen> = dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid

Örnek :

border-style: solid; | border-style: dotted;

Öntanımlı Değer :

border-top-style Özelliği: Üst çerçeve deseni, none
border-right-style Özelliği: Sağ çerçeve deseni, none
border-bottom-style Özelliği: Alt çerçeve deseni, none
border-left-style Özelliği: Sol çerçeve deseni, none

Uygulanabilen Etiketler :

Tüm Etiketler. ::first-letter ögesine de uygulanabilir.

Kalıtsallık :

Yok

Tarayıcı Desteği :

Tüm Tarayıcılar

Animasyon :

Desteklenmiyor animation Özelliği

Javascript :

öge.style.borderStyle = "groove";

Sürüm :

CSS1 / CSS2 (düz. 1) / CSS Backgrounds and Borders Module Level 3

Açıklama :

`border-style` Özelliği Kullanımı

Sponsor'un katkılarıyla...

Markanız için 300X300 alan.

CSS border-style özelliği; 4 kenarın birden çerçeve desenini belirler. 4 kenarın kısaltmasıdır. Her kenar için farklı farklı desen değeri verilebilmesini sağlar.

1 değer tanımlanırsa 4 kenar için de geçerli olur.
2 değer tanımlanırsa ilki üst ve alt ikincisi ise sol ve sağ kenarlar için geçerli olur.
3 değer tanımlanırsa ilki üst, ikincisi sol ve sağ, üçüncüsü ise alt kenar için gereçrli olur.
4 değer belirlenirse sırasıyla (saat yönünde) üst sağ alt ve sol kenarlar için geçerli olurlar.

border-style özelliği: yukarı sağ aşağı sol; ise;

İkili Yazım : üst sağ (üst-yinelenir sağ-yinelenir)
Üçlü Yazım : üst sağ alt (sağ-yinelenir)

border-style: 4 kenar deseni; /* Tek-Değer Yazımı */
	border-style: solid;

border-style: yatay dikey; /* İki-Değer Yazımı */
	border-style: solid ridge;

border-style: üst dikey alt; /* Üç-Değer Yazımı */
	border-style: solid ridge dotted;

border-style: üst sağ alt sol; /* Dört-Değer Yazımı */
	border-style: solid ridge dotted double;

Çerçeve kalınlığını ve rengini değiştirseniz bile çerçeve deseni "yok" (none) olduğu için çerçeve görünmeyecektir. Kalınlığı ve rengi değiştirdikten sonra çerçeve deseni olan bu özelliğe öntanımlı olan none dışında geçerli bir değer vermeyi unutmayın.

border-bottom-style özelliği gibi bir özellik tanımlandıktan sonra kısaltması o özellik olmadan tanımlanıyorsa özellik öntanımlı değerini tutar. Yani tanımlama yapılırken sıralama önemlidir.

Aşağıdaki iki örnek birbirlerine denktir :

/* Yazılan Kod */

border-top-style: solid;
border-right: thick black;

/* Sonuç */

border-top-style: solid;
border-right: none thick black; /* "none" değeri çerçevenin gösterilmemesine neden olur. */

`border-style` Özelliği Tarayıcı Desteği

MasaüstüTaşınabilir

Tarayıcı →Özellik ↓
Temel Destek	1 [1]	3.5	1	1	4

Tarayıcı →Özellik ↓
Temel Destek	4 [1]	Var	3	2.6	?

[1] Firefox 50'ye kadar, border-radius ile yuvarlanmış köşelerin desenleri border-style: solid; gibi yuvarlandı. border-style özelliği ile ilgili bu hata Firefox 50'de düzelteldi.

`border-style` Özelliğinin Alabileceği Değerler

Desen: Çerçeve deseninin alabildiği değerler : dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid.

İlişkili Özellikler

border Özelliği: Çerçeveyi belirler.
border-width Özelliği: Çerçeve genişliğini belirler.
border-color Özelliği: Çerçeve rengini belirler.

CSS border-style Özelliği

border-style Özelliği Temel Özellikler

border-style Özelliği Kullanımı

border-style Özelliği Tarayıcı Desteği

border-style Özelliğinin Alabileceği Değerler