Страница CSS border bottom

CSS Border Bottom

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

Пример использования свойства CSS border-bottom:


<!DOCTYPE html>
<html>
<head>
<style>
div {
  border-bottom: 2px solid blue;
  padding: 20px;
}
</style>
</head>
<body>

<div>
  <h2>CSS Border Bottom</h2>
  <p>Пример текста с нижней границей.</p>
</div>

</body>
</html>

В данном примере мы создаем блочный элемент div и устанавливаем для него нижнюю границу с помощью свойства border-bottom. Значение 2px задает ширину границы, а solid blue устанавливает стиль (сплошная линия) и цвет границы (синий). Для дополнительного визуального эффекта добавлено свойство padding, которое задает отступы внутри элемента.

Кроме указанных значений, свойство border-bottom может принимать и другие значения. Например, вы можете задать границу с помощью ключевого слова none, чтобы снять границу:


div {
  border-bottom: none;
}

Вы также можете задать стиль границы с помощью ключевых слов dotted (пунктирная линия) или dashed (штриховая линия):


div {
  border-bottom: 1px dotted red;
}


div {
  border-bottom: 1px dashed green;
}

Если вам нужно добавить несколько границ одновременно, вы можете использовать разные свойства вроде border-bottom-width, border-bottom-style и border-bottom-color:


div {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: blue;
}

Как видно из примеров кода, свойство CSS border-bottom предоставляет множество возможностей для управления внешним видом границ нижней стороны элемента.

Страница CSS border bottom

CSS Border Bottom

Похожие вопросы на: "css border bottom "