Bir elementin sol tarafından iç boşluk vermek için kullanılır.
div {
width: 300px;
border: 1px solid red;
padding-left: 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 left değerine göre ayarlanır.
Position: relative li elementli nesneler için ise kendi bulunduğu konumuna göre left değerini kazanır.
div {
border: 3px solid red;
}
.relative {
width: 300px;
height: 300px;
position: relative;
}
.absolute {
position: absolute;
width: 150px;
height: 150px;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top:-75px;
}
| Değer | Açıklama |
| auto | Konum otomatik olarak ayarlanır. |
| length | Yüzdeli, px, em, cm gibi değerler alabilir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 5.5 | 1.0 | 5.0 |
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 Sol kenarlık genişliğini ayarlamak için kullanılır.
#borderLeft{
border-style: solid;
border-left-width: 10px;
}
| Değer | Açıklama |
| medium | Kenarlık genişliğini orta olarak ayarlar. |
| thin | İnce bir sol kenarlık belirtir. |
| thick | Kalın bir sol 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 Sol kenarlık stilini ayarlamak için kullanılır.
#borderLeft{
border-style: solid;
border-left-style: dotted;
}
| Değer | Açıklama |
| none | Kenarlık stilinin olmadığını belirtir. |
| 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. |
| solid | düz 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 | 5.5 | 1.0 | 9.2 |
Elementin Sol kenarlık rengini ayarlamak için kullanılır.
Not: Her zaman için önce border-left-color özelliklerini ayarlayınız. Rengi değiştirmek için önce border elementiniz olması gerekir.
#borderLeft {
border-style: solid;
border-left-color: blue;
}
| Değer | Açıklama |
| color | Sol kenarlık rengini belirtmek için kullanılır. |
| transparent | Sol kenarlık renginin transparan yapmak için kullanılır. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 3.5 | 1.0 |
Elementin Sol kenarlık özelliklerini ayarlamak için kullanılır.
#borderLeft{
border-style: solid;
border-left: thick double blue;
}
| Değer | Açıklama |
| border-left-width | Sol kenarlık genişliğini ayarlamak için kullanılır. varsayılan değeri “medium “dur. |
| border-left-style | Sol kenarlık stilini ayarlamak için kullanılır. |
| Border-left-color | Sol kenarlık rengini ayarlamak için kullanılır. |
| İnital | |
| İnherit |
| 15.0 | 15.0 | 4.0 | 3.5 | 1.0 |
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 |