CSS рамки

Рамка представляет собой обычную линию, которая отображается вокруг элемента. Но совсем не обязательно применять рамку, окружающую элемент со всех сторон. Можно добавить ее только с требуемой стороны элемента. Например, если добавить рамку только с нижней стороны блочного элемента, то она будет производить тот же эффект, что и HTML тег <hr>, выступая в качестве разделителя.

Каждая рамка имеет три параметра, которыми мы можем управлять с помощью CSS: ширина, стиль и цвет, рассмотрим с помощью каких свойств можно их задавать и изменять:

border-width - задает ширину рамки. Для установки ширины можно использовать пиксели или ключевые слова: thin, medium, thick.
border-style - определяет стиль рамки с помощью одного из восьми возможных значений: solid, dotted, dashed, double, groove, ridge, inset и outset.
border-color - указывает цвет рамки.

Вместо использования всех трех свойств, можно использовать всего одно - CSS свойство border, которое позволяет одновременно задать ширину, стиль и цвет для рамки в одном объявлении:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.one {
        border-style: solid;
        border-width: 5px;
      }
      p.two {
        border-style: solid;
        border-width: medium;
		border-color: red;
      }
      p.three {
        border: 3px dashed #ffffff;
        background-color: #0000FF;
		color: #ffffff;
      }
    </style>
  </head>

  <body>
    <p class="one">Первый абзац.</p>
    <p class="two">Второй абзац.</p>
    <p class="three">Третий абзац.</p>
  </body>
</html>

Попробовать »

Для управления рамкой отдельно с каждой стороны элемента, используются соответствующие свойства:

border-top - верхняя рамка
border-left - левая рамка
border-right - правая рамка
border-bottom - нижняя рамка

Эти свойства работают точно так же, как и CSS свойство border, с тем исключением, что позволяют управлять рамкой только с одной стороны стилизуемого элемента.

С этой темой смотрят: