CSS Границы

Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих

❮ Prev Next ❯

CSS Border. Свойства границы

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

У меня есть границы со всех сторон.

У меня красная нижняя граница.

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

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

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

Результат:

Точечная граница.

Пунктирная граница.

Сплошная граница.

Двойная граница.

Желобчатая границы. Эффект зависит от значения цвета границы.

Ребристая граница. Эффект зависит от значения цвета границы.

Граница внутрь. Эффект зависит от значения цвета границы.

Граница наружу. Эффект зависит от значения цвета границы.

Нет границы.

Скрытая граница.

Смешанная граница.

Попробуйте сами »

Примечание: Ни одно из ДРУГИХ свойств границ CSS, описанных ниже, не будет иметь ЛЮБОГО эффекта, если не установлено свойство border-style!

CSS Ширина границы

Свойство border-width определяет ширину четырех границ.

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

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

5px border-width

Пример

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

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

p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}

Попробуйте сами »

CSS Border Color. Цвет границы

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

Цвет может быть установлен с помощью:

name - укажите название цвета, например "red"
Hex - укажите шестнадцатеричное значение, например "#ff0000"
RGB - укажите значение RGB, например, "rgb(255,0,0)"
прозрачный

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

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

Красная граница

Пример

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

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

p.three {
  border-style: solid;
  border-color: red green blue yellow;
}

Попробуйте сами »

CSS Границы - Отдельные стороны

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

В 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 - точечные

Свойство border-style используется в примере выше. Однако он также работает с border-width и border-color.

CSS Граница - Сокращенное Свойство

Как видно из приведенных выше примеров, при работе с границами необходимо учитывать множество свойств.

Чтобы сократить код, также можно указать все отдельные свойства границы в одном свойстве.

Свойство border является сокращенным свойством для следующих отдельных свойств границы:

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

Пример

p {
border: 5px solid red;
}

Результат:

Некоторый текст

Попробуйте сами »

Вы также можете указать все отдельные свойства границы только для одной стороны:

Левая граница

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

Результат:

Некоторый текст

Попробуйте сами »

Нижняя граница

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

Result:

Некоторый текст

Попробуйте сами »

CSS Округлые границы

Свойство border-radius используется для добавления округленных границ к элементу:

Normal border - нормальная граница

Round border - чуть круглая граница

Rounder border - округленная граница

Roundest border - максимально округленная граница

Пример

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

Попробуйте сами »

Примечание: Свойство border-radius не поддерживается в IE8 и более ранних версиях.

Больше примеров

Все свойства верхней границы в одном объявлении
В этом примере демонстрируется сокращенное свойство для установки всех свойств верхней границы в одном объявлении.

Пример

Установить стиль нижней границы
Этот пример демонстрирует, как установить стиль нижней границы.

Пример

Установите ширину левой границы
Этот пример демонстрирует, как установить ширину левой границы.

Пример

Установите цвет четырех границ
Этот пример демонстрирует, как установить цвет четырех границ. Может иметь от одного до четырех цветов.

Пример

Установите цвет правой границы
Этот пример демонстрирует, как установить цвет правой границы.

Пример

Проверьте себя с помощью упражнений!

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 »

Все свойства CSS Границ

Свойство	Описание
border	Устанавливает все свойства границы в одном объявлении
border-bottom	Устанавливает все свойства нижней границы в одном объявлении
border-bottom-color	Устанавливает цвет нижней границы
border-bottom-style	Устанавливает стиль нижней границы
border-bottom-width	Устанавливает ширину нижней границы
border-color	Устанавливает цвет четырех границ
border-left	Устанавливает все свойства левой границы в одном объявлении
border-left-color	Устанавливает цвет левой границы
border-left-style	Устанавливает стиль левой границы
border-left-width	Устанавливает ширину левой границы
border-radius	Устанавливает все четыре свойства border-*-radius для закругленных углов
border-right	Устанавливает все свойства правой границы в одном объявлении
border-right-color	Устанавливает цвет правой границы
border-right-style	Устанавливает стиль правой границы
border-right-width	Устанавливает ширину правой границы
border-style	Устанавливает стиль четырех границ
border-top	Устанавливает все свойства верхней границы в одном объявлении
border-top-color	Устанавливает цвет верхней границы
border-top-style	Устанавливает стиль верхней границы
border-top-width	Устанавливает ширину верхней границы
border-width	Устанавливает ширину четырех границ

W3Schools на русском уроки для начинающих по CSS CSS3 для новичков основы языка CSS курсы с нуля язык css как сделать границы в css цвет границ на веб-страницах border каскадные таблицы стилей css

❮ Prev Next ❯