Урок 7. Рамка элемента CSS

Практически на каждом на сайте используется свойство, которое создаёт вокруг элемента рамку. Она нужна либо для кнопок, либо для блоков с текстом. Для создания рамки у элемента в CSS есть два свойства: border и outline. Рассмотрим их.

border

Данное свойство нужно для установки рамки вокруг элемента, указывает на его границу в web-документе, ширина рамки учитывается при расположении элемента. Имеет 3 значения - цвет, толщину и тип рамки.

Синтаксис у свойства border следующий:

border: Ширина Тип Цвет;

Можно выбрать и другой порядок указания значений свойства, но главное через пробел.

Толщину (ширину) рамки нужно указывать в пикселях (px) или процентах (%).
Цвет можно задать либо в формате RGB (Red Green Blue), либо в HTML HEX кода.

Ниже представлены ТИПЫ линий с их названиями:


Как установить рамки у элемента? Делаем следующим образом:

#block { 
  border:3px solid #0085сс; /* установили линию толщиной 3 пикселя синего цвета  */
}

Если Вы хотите установить одну-две-три рамки с определённой стороны, то указываем так:

border-top - рамка сверху;
border-bottom - рамка снизу;
border-left - рамка слева;
border-right - рамка справа;

.block { 
  border-right: 3px solid #0085cc;
  border-bottom: 2px dashed #0085cc;
}

Если Вы хотите убрать рамки элемента в CSS, то пропишите в свойстве border - none

.empty { 
  border: none; /* у элемента с классом empty не будет рамки */
}

outline

Outline - это свойство, которое нужно для установки внешней рамки элемента.

Есть два отличия от border:
Во-первых, линия, задаваемая в outline НЕ будет влиять на положение самого блока, его ширину и высоту.
Во-вторых, возможность установки рамки с определённой стороны отсутствует.
Синтаксис тот же, что и border.

outline: 2px dotted #0085cc; /* рамка 2 пикселя пунктиром синяя*/

Для outline, как и для border, убрать рамки можно прописав none:

outline: none;

Спасибо за внимание!