border-bottom-style, bir HTML öğesinin alt kenarındaki çizginin nasıl görüneceğini belirten bir CSS özelliğidir. Bu özellik, alt kenar çizgisinin stilini belirleyerek ögelerin tasarımında birçok farklı efekt elde edilmesine olanak tanır.
border-bottom-style and border-style özelliği aynıdır, tek bir farkları alt kenar için özelleştirilmiş olmalarıdır.
Aşağıdaki örnek kodlar, border-bottom-style özelliğinin bazı kullanımlarını göstermektedir:
Örnek 1:
```
h1 {
border-bottom-style: solid;
}
```
Bu örnekte, h1 öğesi alt kenarında bir çizgi görüntülenir. Bu çizginin stilini \"solid\" olarak belirleyerek kalın ve düz bir çizgi elde edilir.
Örnek 2:
```
h2{
border-bottom-style: dotted;
}
```
Bu örnekte, h2 öğesi alt kenarında kesikli bir çizgi görüntülenir. Bu çizginin stilini \"dotted\" olarak belirleyerek noktalı bir çizgi elde edilir.
Örnek 3:
```
h3 {
border-bottom-style: double;
}
```
Bu örnekte, h3 öğesi alt kenarında çift bir çizgi görüntülenir. Bu çizginin stilini \"double\" olarak belirleyerek çift çizgi elde edilir.
Örnek 4:
```
p {
border-bottom-style: groove;
}
```
Bu örnekte, p öğesi alt kenarında oymalı bir çizgi görüntülenir. Bu çizginin stilini \"groove\" olarak belirleyerek oyuk bir çizgi elde edilir.
border-bottom-style özelliğini border-bottom-width ve border-bottom-color özellikleri ile birlikte kullanarak, alt çizginin kalınlığı ve rengini de özelleştirebilirsiniz.
Örnek:
```
h4 {
border-bottom-style: dashed;
border-bottom-width: 3px;
border-bottom-color: blue;
}
```
Bu örnekte, h4 öğesi alt kenarında mavi bir kesikli çizgi görüntülenir. Çizginin stilini \"dashed\" olarak belirleyerek, kalınlığını \"3px\" olarak belirleyerek, alt kenarın rengini de \"mavi\" olarak belirleyerek özelleştirilmiş bir tasarım elde edilir.
Bu örnekler, border-bottom-style özelliğinin kullanımına örnek olarak göstermektedir. Bu özelliği kullanarak, HTML öğelerinizin alt çizgilerini tasarlayabilir ve web sayfanızda profesyonel bir görünüm elde edebilirsiniz.