Границы элементов

Теория

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

Возможные значения для границ CSS, которые можно применять:

  • solid (тонкая граница);
  • dotted (граница состоит из точек, пунктир);
  • dashed (граница состоит из коротких отрезков);
  • double (двойная);
  • groove (эффект углубления);
  • ridge (эффект кромки);
  • inset (эффект врезки);
  • outset (эффект возвышения).

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

И, наконец, border-color используют для указания цвета границы.

Добавьте этот код в CSS-файл:

h2 {
	border-style: dashed;
	border-width: 3px;
	border-left-width: 10px;
	border-right-width: 10px;
	border-color: red;
}

В результате вы должны получить красную прерывистую границу вокруг заголовка HTML второго уровня (элемент h2) шириной 3 пикселя наверху и внизу, а также 10 пикселей слева и справа (Ширина всей границы в 3 пикселя в результате была определена).

Фото



Видео

Автор Cascading Style Sheets