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

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;}

Результат:

Внимание! НИКАКОЕ другое свойство управления рамками не будет работать пока не будет определено свойство 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;
}

Результат:

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

Свойство 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 свойства определения рамки