Стиль нижней границы

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


border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;
border-bottom-style: inherit;

none – линия не отображается.

hidden – тоже что и none кроме ячеек таблицы со свойством border-collapse.

dotted – пунктирная граница элемента.

dashed – штриховая граница элемента.

solid – сплошная линия границы элемента.

double – двойная линия границы элемента.

groove – вдавленная рифленая линия.

ridge – выпуклая рифленая линия.

inset – объемная вдавленная граница.

outset – объемная выпуклая граница.

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


HTML

<div class="note">
  <h3>border-bottom-style</h3>
  <p>border-bottom-width: 12px;</p>
  <p class="mark">border-bottom-style: dashed;</p>
  <p>border-bottom-color: gray;</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: 12px;
    border-bottom-style: dashed;
    border-bottom-color: gray;
}