Цвет нижней границы

Border bottom color

Для того чтобы задать цвет границы находящейся внизу элемента применяется свойство border-bottom-color. В качестве значения для него может использоваться прозрачность, наследование, шестнадцатеричный код и другие форматы цвета.


border-bottom-color: orange;
border-bottom-color: #ffa500;
border-bottom-color: rgba(255, 165, 0, 1);
border-bottom-color: transparent;
border-bottom-color: inherit;

orange – оранжевый цвет для нижней границы

#ffa500 – тот же цвет шестнадцатеричном коде

rgba(255, 165, 0, 1) – формат цвета с регулировкой прозрачности

transparent – задаёт прозрачность

inherit – наследование

CSS цвет границы 

HTML

<div class="note">
  <h3>border-bottom-color</h3>
  <p>border-bottom-width: 20px;</p>
  <p>border-bottom-style: solid;</p>
  <p class="mark">border-bottom-color: #f60;</p>
</div>



CSS

h3{
    color: #444;
    font-size: 24px;
    padding-bottom: 14px;
}
p{
    margin: 4px 0px;
    font-size: 22px;
}
.mark{
    color: #fff;
    padding: 4px;
    background-color: #777;
}
.note{
    display: table;
    margin: 50px auto;
    padding: 10px 40px;
    letter-spacing: 1.5px;
    background-color: #fC0;
    border-bottom-width: 20px;
    border-bottom-style: solid;
    border-bottom-color: #f60;
}