Рамки элементов

CSS свойства управления рамкой позволяют определять стиль, ширину и цвет рамки HTML элемента.

Рамки можно определять для большинства элементов внутри тела веб-страницы.


У меня рамка со всех сторон.


У меня красная рамка снизу.


У меня рамка с закругленными углами.


У меня синяя рамка слева.


CSS свойство border-style

Свойство border-style определяет стиль рамки.

Допустимо использовать следующие значения:

  • dotted - Рамка состоит из точек
  • dashed - Рамка состоит из черточек
  • solid - Сплошная линия
  • double - Двойная сплошная линия
  • groove - 3D рамка, представляющая прорезанный желоб. Эффект зависит от значения свойства border-color
  • ridge - 3D рамка, представляющая оттиснутую борозду. Эффект зависит от значения свойства border-color
  • inset - 3D рамка, представляющая вдавленное углубление. Эффект зависит от значения свойства border-color
  • outset - 3D рамка, представляющая выставленное возвышение. Эффект зависит от значения свойства border-color
  • none - Без рамки
  • hidden - Скрытая рамка

Свойство border-style может принимать от одного до четырех значений (для верхней, правой, нижней, левой рамок).

Пример

Определение различных стилей рамки:


p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Результат:

Рамка из точек (dotted).

Рамка из черточек (dashed).

Сплошная линия (solid).

Двойная сплошная линия (double).

Прорезанный желоб (groove). Эффект зависит от значения свойства border-color.

Оттиснутая борозда (ridge). Эффект зависит от значения свойства border-color.

Вдавленное углубление (inset). Эффект зависит от значения свойства border-color.

Выставленное возвышение (outset). Эффект зависит от значения свойства border-color.

Без рамки (none).

Скрытая рамка (hidden).

Смешанные рамки.


Внимание! НИКАКОЕ другое свойство управления рамками не будет работать пока не будет определено свойство border-style.

CSS свойство border-width

Свойство border-width определяет толщину рамки для всех четырех сторон элемента.

Толщина может задаваться в единицах измерения (px, pt, cm, em, и т. д.), либо при помощи предопределенных ключевых слов: thin, medium, thick.

В следующем примере определяется различная толщина рамок:


p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

Результат:

5px border-width
medium border-width
2px border-width
thick border-width

Индивидуальная толщина рамки для каждой стороны элемента

Свойство border-width может принимать от одного до четырех значений (для верхней, правой, нижней и левой рамки).


p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px верхняя и нижняя рамки, 20px по сторонам */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px верхняя и нижняя рамки, 5px по сторонам */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px верхняя, 10px правая, 4px нижняя, 35px левая */
}

CSS свойство border-color

Свойство border-color используется для определения цвета четырех рамок элемента.

Цвет можно задать как

  • имя цвета - например, "red",
  • HEX значение - например, "#ff0000",
  • RGB значение - например, "rgb(255,0,0)",
  • HSL значение - например, "hsl(0,100%,50%)",
  • transparent.

Подробнее о цветах рассказывается в главе нашего учебника Как использовать цвета.

Если свойство border-color не определяется, то оно наследует цвет элемента.

В следующем примере определяется различный цвет рамок:


p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

Результат:

Красная рамка
Зеленая рамка
Синяя рамка

Индивидуальный цвет рамки для каждой стороны элемента

Свойство border-color может принимать от одного до четырех значений (для верхней, правой, нижней и левой рамки).


p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red - верх, green - справа, blue - низ, yellow - слева */
}

Определение рамки для каждой стороны индивидуально

Из приведенных ранее примеров вы видели, что можно определять разные рамки индивидуально для каждой стороны элемента.

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

Пример:


p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Результат:

Разные стили рамки

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


p {
  border-style: dotted solid;
}

Вот как это работает:

Если у border-style определено четыре значения:

  • border-style: dotted solid double dashed;
    • верхняя сторона рамки состоит из точек (dotted)
    • правая сторона рамки сплошная линия (solid)
    • нижняя сторона рамки двойная сплошная линия (double)
    • левая сторона рамки состоит из черточек (dashed)

Если у border-style определено три значения:

  • border-style: dotted solid double;
    • верхняя сторона рамки состоит из точек (dotted)
    • правая и левая стороны рамки сплошная линия (solid)
    • нижняя сторона рамки двойная сплошная линия (double)

Если у border-style определено два значения:

  • border-style: dotted solid;
    • верхняя и нижняя стороны рамки состоят из точек (dotted)
    • правая и левая стороны рамки сплошная линия (solid)

Если у border-style определено одно значение:

  • border-style: dotted;
    • все четыре стороны рамки состоят из точек (dotted)

/* Четыре значения */
p {
  border-style: dotted solid double dashed;
}

/* Три значения */
p {
  border-style: dotted solid double;
}

/* Два значения */
p {
  border-style: dotted solid;
}

/* Одно значение */
p {
  border-style: dotted;
}

Выше мы использовали свойство border-style, но все сказанное также работает и со свойствами border-width и border-color.


p {
  border-style: solid;
  border-top-width: 10px;
  border-right-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;
}

CSS свойство border. Короткая форма записи

Как вы могли заметить, для определения рамок элемента приходится иметь дело с довольно большим набором CSS свойств.

Тем не менее, чтобы уменьшить размер кода, существует возможность все эти многочисленные свойства объединить в одном CSS свойстве.

Свойство border является короткой формой записи, объединяющей воедино следующие свойства:

  • border-width
  • border-style (обязательно)
  • border-color

Пример:


p {
  border: 5px solid red;
}

Результат:

Какой-то текст

Также, можно определять все значения рамки для отдельной стороны элемента.

Рамка слева:


p {
  border-left: 6px solid red;
}

Результат:

Какой-то текст


Рамка снизу:


p {
  border-bottom: 6px solid red;
}

Результат:

Какой-то текст


Добавьте следующий код в ваш CSS файл:


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

Эта декларация определяет прерывистую рамку красного цвета вокруг заголовков второго уровня (элементы <h2>), у которой толщина верхней и нижней стороны будет 3 пикселя, а левой и правой - 10 пикселей (здесь 3-х пиксельная толщина рамки, определяемая в начале для всех сторон рамки, переопределяется).

CSS свойство border-radius

Свойство border-radius используется, чтобы добавить скругленные углы у рамки вокруг HTML элемента.

Обычная рамка

Рамка со скругленными углам

Рамка с более скругленными углам

Рамка с сильно скругленными углам


Пример:


p {
  border: 2px solid red;
  border-radius: 5px;
}

Все CSS свойства определения рамки

СвойствоОписание
borderКороткое свойство, определяющее все атрибуты рамки HTML элемента за одну декларацию
border-bottomОпределяет все атрибуты нижней рамки HTML элемента за одну декларацию
border-bottom-colorОпределяет цвет нижней рамки HTML элемента
border-bottom-styleОпределяет стиль нижней рамки HTML элемента
border-bottom-widthОпределяет толщину нижней рамки HTML элемента
border-colorОпределяет цвет всех четырех сторон рамки HTML элемента
border-leftОпределяет все атрибуты левой рамки HTML элемента за одну декларацию
border-left-colorОпределяет цвет левой рамки HTML элемента
border-left-styleОпределяет стиль левой рамки HTML элемента
border-left-widthОпределяет толщину левой рамки HTML элемента
border-radiusОпределяет радиус скругления углов рамки
border-rightОпределяет все атрибуты правой рамки HTML элемента за одну декларацию
border-right-colorОпределяет цвет правой стороны рамки HTML элемента
border-right-styleОпределяет стиль правой рамки HTML элемента
border-right-widthОпределяет толщину правой рамки HTML элемента
border-styleОпределяет стиль всей рамки вокруг элемента
border-topОпределяет все атрибуты верхней рамки HTML элемента за одну декларацию
border-top-colorОпределяет цвет верхней рамки HTML элемента
border-top-styleОпределяет стиль верхней рамки HTML элемента
border-top-widthОпределяет толщину верхней рамки HTML элемента
border-widthОпределяет толщину всех четырех сторон рамки HTML элемента