border-image-source özelliği, border ‘ a verilen resmi değiştirmek için kullanılır.
#borderimage {
border-image-source: url(http://w3tr.com/file/border2.png);
border-image-slice: 100;
}
| Değer | Açıklama |
| none | Varsayılan değer. Kullanılacak görüntü yok. |
| image | Görüntün yolunu belirtir. |
| İnital | |
| İnherit |
| 15.0 | 15.0 | 11.0 | 6.0 | 15.0 |
border-image-repeat özelliği, border ‘ ın belirtilen boyutlar içinde tekrarlanmasını sağlar.
#borderimage{
-webkit-border-image: url(http://w3tr.com/file/border.png) 50 round;
-o-border-image: url(http://w3tr.com/file/border.png) 50 round;
border-image: url(http://w3tr.com/file/border.png) 50 round;
border-image-repeat: repeat;
}
| Değer | Açıklama |
| 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. |
| İnital | |
| İnherit |
| 15.0 | 15.0 | 11.0 | 6.0 | 15.0 |
border-image-outset özelliği, border ‘ ın belirtilen boyuttan ne kadar dışarı taşacağını beliritir.
#borderimage{
-webkit-border-image: url(http://w3tr.com/file/border.png) 50 round;
-o-border-image: url(http://w3tr.com/file/border.png) 50 round;
border-image: url(http://w3tr.com/file/border.png) 50 round;;
border-image-outset: 10px;}
| Değer | Açıklama |
| length | Ne kadar taşacağını belirler. Varsayılan değer 0 ‘ dır. |
| number | Borderların sıralamasına göre uzaklık atamamızı sağlar. |
| İnital | |
| İnherit |
| 15.0 | 15.0 | 11.0 | 6.0 | 15.0 |
Border-image özelliği bir elementin borderlarına resim ataması özelliğini kullanmamızı sağlar.
Not: border-color özelliğinden önce border-style özelliğinin tanımlanmış olması gerekir.
#borderimage1{
-webkit-border-image: url(http://w3tr.com/file/border.png) 50 round;
-o-border-image: url(http://w3tr.com/file/border.png) 50 round;
border-image: url(http://w3tr.com/file/border.png) 50 round;
}
#borderimage2{
-webkit-border-image: url(http://w3tr.com/file/border2.png) 50 round;
-o-border-image: url(http://w3tr.com/file/border2.png) 50 round;
border-image: url(http://w3tr.com/file/border2.png) 50 round;
}
| Değer | Açıklama |
| border-image-source | Görüntünün yolunu belirtmek için kullanılır. |
| border-image-slice | border bölümlerinin sınırlarını gösterir. |
| border-image-width | border a verilen resmi genişliğini belirlememize olanak sağlar. |
| border-image-outset | Belirlenen sınırın dışına, ötesine uzamasını sağlar. |
| border-image-repeat | Verilen görüntünün kapladığı miktar boyunca tekrar etmesini sağlar. |
| İnital | |
| İnherit |
| 16.0 4.0-webkit |
15.0 3.5-moz |
11.0 | 6.0 3.1-webkit |
15.0 11.0 -o |
Border-color özelliği bir elementin dört sınırlarının rengini ayarlar. Bu özellik bir ila dört değerlere sahip olabilir.
Not: border-color özelliğinden önce border-style özelliğinin tanımlanmış olması gerekir.
p.tekli {
border-style: solid;
border-color: #0000ff;
}
p.ikili {
border-style: solid;
border-color: #ff0000 #0000ff;
}
p.uclu {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.dortlu {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
| Değer | Açıklama |
| color | Arkaplan rengini belirler varsayılan değer siyahtır. |
| transparent | Rengin şeffaf olması gerektiğini belirtir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |
border-collapse özelliği, table ve içindeki sutunlar için ayrı ayrı border tanımlamamızı olanak sağlar.
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid blue;
}
| Değer | Açıklama |
| separate | Değerlere boşluk ayırt etmeden border verilmesini sağlar. |
| collapse | Genel tabloya border verilir sadece. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 5.0 | 1.2 | 4.0 |
border-bottom-width özelliği, border ‘ ın genişlik boyutunu tanımlamamızı sağlar.
Not: border ‘ ın width özelliğini belirtmeden önce kesinlikle border-style özelliği verilmelidir.
#border-bottom-width{
border-style: solid;
border-bottom-width: 10px;
color: blue;
}
| Değer | Açıklama |
| medium | varsayılan değer. |
| thin | ince bir sınır sitilini vermemizi sağlar. |
| thick | ince bir sınır sitilini vermemizi sağlar. |
| length | Nokta biçiminde stil verir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |
Uygulanan elementin alt kenarlığına stil vermemizi sağlar.
#border-bottom-style{
width:50%;
height: 100px;
text-align: center;
border: 3px solid #000;
border-bottom-style: dashed;
}
See the Pen dYQexy by W3TR (@w3tr) on CodePen.
| Değer | Açıklama |
|---|---|
| none | Hiçbir değer verilmez. Varsayılan değerdir. |
| hidden | None değeriyle aynı işlevi görür. Stil verilmemiş sayılır. |
| dotted | Nokta biçiminde stil verir. |
| dashed | Kesik çizgiler halinde stil verir. |
| solid | Düz çizgi halinde stil verir. |
| double | Düz iki çizgi olarak stil verir. |
| groove | Görüntü olarak oyma stili verir. |
| ridge | Çıkıntılı bir sınır gibi stil verir. |
| inset | İçe doğru stil verir. |
| outset | 3D kabartmalı bir sınır olarak stil verir. |
| initial | |
| inherit |
| 1.0 | 1.0 | 5.5 | 1.0 | 9.2 |
Uygulanan elementin sağ alt köşesine yuvarlak bir görünüm vermemizi sağlar.
#border-bottom-right-radius{
width: 50%;
height: 100px;
text-align: center;
border: 3px solid #000;
border-bottom-right-radius: 2em;
}
See the Pen pjQVYa by W3TR (@w3tr) on CodePen.
| Değer | Açıklama |
|---|---|
| length | Sol alt köşede şeklini tanımlar . Varsayılan değer 0’dır. |
| % | % Olarak sağ alt köşesinde şeklini tanımlar. |
| inital | |
| inherit |
| 5.0 4.0-webkit |
4.0 3.0 -moz |
9.0 | 5.0 3.1 -webkit |
10.5 |
Uygulanan elementin sol alt köşesine yuvarlak bir görünüm vermemizi sağlar.
#border-bottom-left-radius{
width: 50%;
height: 100px;
text-align: center;
border: 3px solid #000;
border-bottom-left-radius: 2em;
}
See the Pen jbQxeL by W3TR (@w3tr) on CodePen.
| Değer | Açıklama |
|---|---|
| length | Sol alt köşede şeklini tanımlar . Varsayılan değer 0’dır. |
| % | % Olarak sol alt köşesinde şeklini tanımlar. |
| inital | |
| inherit |
| 5.0 4.0-webkit |
4.0 3.0 -moz |
9.0 | 5.0 3.1 -webkit |
10.5 |