border Özelliği Temel Özellikler
- CSS Yazımı :
border: <genişlik> <desen> <renk>; border: border-width border-style border-color;- Örnek :
border: 1px solid #cCc;- Öntanımlı Değer :
-
border-widthÖzelliği-
<genişlik>: Çerçeve genişliğini px, pt, mm ve benzeri türünden ayarlar.
Aşağıda öntanımlı değerleriyle verilen çerçeve kenarlarının genişliğini belirleyen değerlerin kısaltmasıdır :border-top-widthÖzelliği :mediumborder-right-widthÖzelliği :mediumborder-bottom-widthÖzelliği :mediumborder-left-widthÖzelliği :medium
border-styleÖzelliği-
<desen>: Çerçeve desenini ayarlar. Zorunlu.
Aşağıda öntanımlı değerleriyle verilen çerçeve kenarlarının desenini belirleyen değerlerin kısaltmasıdır :border-top-styleÖzelliği :noneborder-right-styleÖzelliği :noneborder-bottom-styleÖzelliği :noneborder-left-styleÖzelliği :none
border-colorÖzelliği-
<renk>: Çerçeve rengini RGB, HEX ya da Ad (redgibi) türünden ayarlar.
Aşağıda öntanımlı değerleriyle verilen çerçeve kenarlarının rengini belirleyen değerlerin kısaltmasıdır :border-top-colorÖzelliği :currentcolorborder-right-colorÖzelliği :currentcolorborder-bottom-colorÖzelliği :currentcolorborder-left-colorÖzelliği :currentcolor
- Uygulanabilen Etiketler :
- Tüm Etiketler.
::first-letterögesine de uygulanabilir. - Kalıtsallık :
- Yok.
- Tarayıcı Desteği :
- Tüm Tarayıcılar
- Animasyon :
- Destekleniyor
animationÖzelliği - Javascript :
öge.style.border = "1px solid red";- Sürüm :
- CSS1 / CSS2 (düz. 1) / CSS Backgrounds and Borders Module Level 3
- Açıklama :
border Özelliği Kullanımı
Markanız için 300X300 alan.
CSS border özelliği border-width özelliği, border-style özelliği (zorunlu) ve border-color özelliğinin kısaltmasıdır. border özelliği ögenin çevresine çerçeve çizer. 4 kenardaki çerçevelerin hepsi için geçerlidir. Bu çerçeve akışta yer kaplar. Akışta yer kaplamayan çerçeve kullanmak için bk. outline özelliği.
4 kenara da ayrı ayrı tanımlanabilir : border-top, border-right, border-bottom, border-left...
Her bir kenarın üzerinde tam denetim sağlanabilir. Örneğin yalnızca alttaki çerçevenin farklı renkte olmasını istiyorsunuz. Çerçeve tanımından sonra border-bottom-color tanımı farklı renkte yapılabilir.
border-image özelliği'nin değeri; çerçeve görseli gösterilemezse diye border özelliği kullanıldığı durumda initial olur ancak border-image-source özelliğinin işlenmiş değeri none ise ya da kaynak bulunamadıysa border-style özelliği gösterilir.
border-top-style /// border-top-color /// border-top-width
border-right-style /// border-right-color /// border-right-width
border-bottom-style /// border-bottom-color /// border-bottom-width
border-left-style /// border-left-color /// border-left-widthborder Özelliği Tarayıcı Desteği
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | 1 | 3.5 | 1 | 1 | 4 |
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | 4 | ? | 1 | ? | ? |
İlişkili Özellikler
outlineÖzelliği- Etiketin dışında, etiketi belli etmek için kullanılan ve içerikte yer kaplamayan çerçevedir.
border-topÖzelliği- Üst çerçevenin kısaltmasıdır ve çerçevenin genişliğini, desenini, ve rengini tanımlar.
border-rightÖzelliği- Sağ çerçevenin kısaltmasıdır ve çerçevenin genişliğini, desenini, ve rengini tanımlar.
border-bottomÖzelliği- Alt çerçevenin kısaltmasıdır ve çerçevenin uzunluğunu, desenini, ve rengini tanımlar.
border-leftÖzelliği- Sol çerçevenin kısaltmasıdır ve çerçevenin genişliğini, desenini, ve rengini tanımlar.