Bir elementin alt tarafından iç boşluk vermek için kullanılır.
div {
width: 300px;
border : 1px solid red;
padding-bottom: 50px;
}
| Değer | Açıklama |
| length | px, cm, % gibi değerler alabilir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |
Position: absolute olarak konumlandırılmış elementler için position: relative’li elementin bottom değerine göre ayarlanır.
Position: relative li elementli nesneler için ise kendi bulunduğu konumuna göre bottom değerini kazanır.
.relative{
position: relative;
border: 1px dotted red;
}
.apsolute{
position :absolute;
left: 25%;
bottom:10px;
border: 1px solid blue;
}
| Değer | Açıklama |
| auto | otomatik olarak ayarlanır. |
| length | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 5.0 | 1.0 | 6.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 |