Elementin kenarlık kalınlığını belirlemek için kullanılır.
#border{
border-style: DOTTED;
border-width: 5px;
padding: 10px;
}
| Değer | Açıklama |
| medium | Kenarlık genişliğini orta olarak ayarlar. |
| thin | İnce bir kenarlık olacağını belirtir. |
| thick | Kalın bir kenarlık olacağını belirtir. |
| length | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |
Elementin üst kenarlık genişliğini ayarlamak için kullanılır.
Not: Her zaman için önce border-top-width özelliklerini ayarlayınız. Rengi değiştirmek için önce border elementiniz olması gerekir.
#borderTop{
border-style: dotted;
border-top-width: 5px;
padding: 10px;
}
| Değer | Açıklama |
| medium | Kenarlık genişliğini orta olarak ayarlar. |
| thin | İnce bir sağ kenarlık belirtir. |
| thick | Kalın bir sağ kenarlık belirtir. |
| length | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |
Elementin üst kenarlık stilini ayarlamak için kullanılır.
#borderTop{
border-style: dashed;
border-top-style: dotted;
padding: 10px;
}
| Değer | Açıklama |
| none | Kenarlık stilinin olmadığını belirtir. |
| hidden | Kenarlığı gizlemek için kullanılır. |
| dotted | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| dashed | kesik çizgili bir kenarlık olduğunu belirtir. |
| double | çift kenarlıklı bir kenarlık olduğunu belirtir. |
| solid | düz bir kenarlık olduğunu belirtir. |
| groove | düz kenarlıklı bir kenarlık olduğunu belirtir. |
| inset | 3D gömme kenar tanımlar. Efekt border-color değerine bağlıdır. |
| ridge | 3D oluklu kenar tanımlar. Efekt border-color değerine bağlıdır. |
| outset | 3D outset kenar tanımlar. Efekt border-color değerine bağlıdır. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 5.5 | 1.0 | 9.2 |
Elementin sağ üst yuvarlak bir görünüm vermek için kullanılır.
#borderRightRadius{
border: 5px solid blue;
border-top-right-radius: 20px;
padding: 10px;
}
| Değer | Açıklama |
| length | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| İnital | |
| İnherit |
| 5.0 4.0-webkit |
4.0 3.0-moz |
9.0 | 5.0 3.1-o |
10.5 |
Elementin sol üst yuvarlak bir görünüm vermek için kullanılır.
#borderLeftRadius{
border: 2px dashed;
border-top-left-radius: 5px;
padding: 10px;
}
| Değer | Açıklama |
| length | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| İnital | |
| İnherit |
| 5.0 4.0-webkit |
4.0 3.0-webkit |
9.0 | 5.0 3.1-webkit |
10.5 |
Elementin üst kenarlık rengini ayarlamak için kullanılır.
Not: Her zaman için önce border-top-color özelliklerini ayarlayınız. Rengi değiştirmek için önce border elementiniz olması gerekir.
#borderTop{
border-style: dotted;
border-top-color: blue;
}
| Değer | Açıklama |
| color | üst kenarlık rengini belirtmek için kullanılır. |
| transparent | üst kenarlık renginin transparan yapmak için kullanılır. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |
Elementin üst kenarlık özelliklerini ayarlamak için kullanılır.
#borderTop{
border-style: solid;
border-top: 2px dashed blue;
}
| Değer | Açıklama |
| border-top-width | üst kenarlık genişliğini ayarlamak için kullanılır. |
| border-top-style | üst kenarlık stilini ayarlamak için kullanılır. |
| Border-top-color | üst kenarlık rengini ayarlamak için kullanılır. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |
Elemente kenarlık görünüşünün nasıl olacağını ayarlamak için kullanılır.
Not: Eğer tek değer verilirse bu tüm kenarlar için geçerlidir, iki değer atanırsa ilki yatayda boşluk için ikincisi dikey de boşluk vermek için tanımlanmıştır.
#borderStyle{
border-style: dotted;
}
| Değer | Açıklama |
| none | Kenarlığını olmayacağını belirtmek için kullanılır. |
| hidden | Kenarlığı gizlemek için kullanılır. |
| dotted | noktalı bir kenarlık olduğunu belirtir. |
| dashed | kesik çizgili bir kenarlık olduğunu belirtir. |
| double | çift kenarlıklı bir kenarlık olduğunu belirtir. |
| groove | düz kenarlıklı bir kenarlık olduğunu belirtir. |
| inset | 3D gömme kenar tanımlar. Efekt border-color değerine bağlıdır. |
| ridge | 3D oluklu kenar tanımlar. Efekt border-color değerine bağlıdır. |
| outset | 3D outset kenar tanımlar. Efekt border-color değerine bağlıdır. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |
border-image-slice özelliği, border ‘ ın belirtilen boyutlar içinde tekrarlanmasını sağlar.
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(http://w3tr.com/file/border.png) round; /* Safari 3.1-5 */
-o-border-image: url(http://w3tr.com/file/border.png) round; /* Opera 11-12.1 */
border-image: url(http://w3tr.com/file/border.png) round;
border-image-slice: 20%;
| Değer | Açıklama | Örnek |
|---|---|---|
| stretch | Varsayılan değer. Görüntü alanını kaplayacak şekilde genişletilir. | |
| repeat | Görüntü alanını sınırlanan bölge kadar tekrar eder. | |
| round | Görüntünün iki noktası arasındaki bölgesi tekrarlanmasını sağlar. | |
| initial | ||
| inherit |
Elemente kenar boşluğu vermek için kullanılır.
Not: Eğer tek değer verilirse bu tüm kenarlar için geçerlidir, iki değer atanırsa ilki yatayda boşluk için ikincisi dikey de boşluk vermek için tanımlanmıştır.
#borderSpacing{
border-collapse: separate;
border-spacing: 5px 20px;
}
| Değer | Açıklama | length | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 8.0 | 1.0 | 4.0 |