• CSS Основы

• Что Такое CSS ?
• Синтаксис CSS
• Селекторы id и class
• Добавление Стилей в HTML Документ

• CSS Оформление

• CSS Фон
• CSS Текст
• Шрифты в CSS
• CSS Ссылки
• CSS Списки
• CSS Таблицы

• CSS Блоки

• CSS Блочная Модель
• CSS Границы
• CSS Контуры
• CSS Поля
• CSS Отступы

• CSS Продвинутый

• Сгруппированные и Вложенные Селекторы
• CSS Размеры
• Отображение и Видимость Элементов
• CSS Позиционирование
• Плавающие Элементы
• CSS Выравнивание
• Псевдо Классы в CSS
• Псевдо Элементы в CSS
• Панель Навигации
• Галерея Изображений
• Прозрачность Изображений в CSS
• Спрайты Изображений
• CSS Медиа Типы
• Атрибутивные
  Селекторы
• Заключение

• CSS Примеры

• CSS Примеры

• CSS Справочники

• CSS Справочник
• CSS Единицы Измерения
• CSS Значения Цветов
• CSS Названия Цветов
• CSS HEX Значения Цветов

CSS Свойства Границы

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

Стиль Границы

Свойство border-style указывает, какой тип границы отображать.

Никакое из свойств границы не возымеет КАКОЙ-ЛИБО эффект до тех пор, пока свойство border-style не установлено!

Значения border-style

none: Отсутствие границы

dotted: Граница из точек

dashed: Пунктирная граница

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

double: Двойная граница. Ширина двойной границы равна значению border-width

groove: Определяет 3D рельефную границу. Эффект зависит от значения border-color

ridge: Определяет 3D хребтообразную границу. Эффект зависит от значения border-color

inset: Определяет 3D вдавленную границу. Эффект зависит от значения border-color

outset: Определяет 3D выпуклую границу. Эффект зависит от значения border-color

Пример: Установка стиля границы

Ширина Границы

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

Ширина устанавливается в пикселях, или с помощью одного из трех предопределенных значений: thin (тонкая), medium (средняя), or thick (толстая).

Замечание: Свойство "border-width" не работает, если используется в одиночку. Используйте сначала свойство "border-style", чтобы установить границы.

Цвет Границы

Свойство border-color используется, чтобы установить цвет границы. Цвет может быть установлен с помощью:

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

Также вы можете установить цвет границы в "transparent".

Замечание: Свойство "border-color" не работает, если используется в одиночку. Укажите сначала свойство "border-style", чтобы установить границы.

Граница - Индивидуальное оформление сторон

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

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

Свойство border-style может иметь от одного до четырех значений.

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

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

Граница - Стенографическое (сокращенное) свойство

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

Чтобы укоротить код, можно указать все свойства границы в одном свойстве. Оно называется стенографическим (или сокращенным) свойством.

Стенографическое свойство для свойств границы - "border":

При использовании свойства border, порядок значений таков:

• border-width
• border-style
• border-color

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

Еще примеры

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

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

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

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

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

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