Использовать HTML Div для добавления границы только сверху и снизу?

Я использую тег HTML DIV для форматирования моего заголовка с рамкой:

<h3 style="background-color:red; padding:2% 0 2% 0; border:5px solid green">
This is a header
</h3>

Однако, я хотел бы, чтобы рамка отображалась только сверху и снизу, но не слева и справа. Я бы хотел, чтобы граница была такой же, как и для верхнего левого нижнего и правого, но граница не имеет этой функции (или я не знаю?). Есть ли способ в стиле CSS сделать это?

Ответ 1

Только случай:

<h3 style="background-color:red; padding:2% 0 2% 0; border-top:5px solid green; border-bottom: 5px solid green;">
This is a header
</h3>

Ответ 2

Для дальнейшего использования ниже приведен альтернативный метод, который позволяет избежать более одного раза определять свойства границы (цвет, ширина) и разрешать декларации, аналогичные объявлениям, используемым для поля и заполнения (по запросу).

border: 5px green;
border-style: solid none;

Как и при отступке или отступе, border-style определяется в порядке сверху, справа, внизу, слева. В приведенном выше случае применяется сплошная граница сверху и снизу элемента и без границы слева или справа от элемента.

Использование этого метода позволяет избежать создания избыточности в объявлении.

Ответ 3

border-top: 5px solid green; border-bottom: 5px solid green;

Вы должны поместить этот стиль непосредственно в <h3>, а не обертывать div вокруг него.

Ответ 4

Вы можете использовать следующее в своем теге css или style....

#div-id {
width: 100px;
height: 50px;
border-style: solid;
border-width: 1px 0;
border-color: #000;
}

Используя селектор ширины границы, вы можете определить толщину границы. Значения вставляются в верхнюю, правую, нижнюю, левую позиции, а сокращенная версия - верхняя/нижняя и правая/левая, что и я.

Например, вы можете установить div с верхней границей 4px, правой границей 3px, нижней границей 2px и левой границей 1px со следующим: border-width: 4px 3px 2px 1px;

Вы можете установить верхнюю и нижнюю границы в 3px, а левую и правую границы - 1 px со следующими параметрами: border-width: 3px 1px;

Ответ 5

Вы можете указать border-right border-left... отдельно.

Ответ 6

Вы можете использовать свойства border-left, border-right, border-top и border-bottom для создания разных стилей границ с каждой стороны вашего контейнера.

В вашем случае вы хотите применить свой стиль к border-top и border-bottom.

Ответ 7

Вы можете указать границу следующим образом:

<h3 style="background-color:red; padding:2% 0 2% 0; 
           border-top:5px solid green; border-bottom:5px solid green">
    This is a header
</h3>