САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

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 Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

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

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Границы



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

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

Установлены границы со всех сторон.


Установлена красная нижняя граница


Установлены закругленные границы.


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


Стиль границ

Свойство 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 может установить от одного до четырех значений: по часовой стрелки top (сверху), right (справа), bottom (снизу), left (слева).

Пример

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-color.

Границы коньком. Эффект зависит от значение border-color.

Границы вставкой. Эффект зависит от значение border-color.

Границы начальные. Эффект зависит от значение border-color.

Границ нет.

Границы скрыть.

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

Редактор кода »

Примечание: Ни одно из свойств границ CSS описаны ниже не будут иметь никакого эффекта, если не установлено свойство border-style!


Ширина границ

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

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

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

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;
}
Редактор кода »

Цвет границ

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

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

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

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

Если свойство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, есть также свойства для задания каждой из границ по часовой стрелке: top (сверху), right (справа), bottom (сверху) и left (слева):

Границы разных стилей

Пример

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;
    • Граница сверху будет штрихом
    • Граница справа будет сплошной
    • Граница снизу будет двойной
    • Граница слева будет пунктирной

Если, свойство border-style имеет три значения:

  • border-style: dotted solid double;
    • Граница сверху будет штрихом
    • Границы справа и слева будут сплошными
    • Граница снизу будет двойной

Если, свойство border-style имеет два значения:

  • border-style: dotted solid;
    • Границы сверху и снизу будут штрихом
    • Границы справа и слева будут сплошными

Если, свойство border-style имеет одно значение:

  • border-style: dotted;
    • все четыре границы будут штрихом

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


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

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

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

Свойство 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;
}

Результат:

Любой текст

Редактор кода »

Закругленные границы

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

Границы нормальные

Границы закругленные

Границы круглее

Границы еще круглее

Пример

p {
   border: 2px solid red;
   border-radius: 5px;
}
Редактор кода »

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


Еще примеры

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

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

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

Установить цвет четырех границ
В этом примере показано, как задать цвет из четырех границ. Свойство может иметь от одного до четырех цветов.

Установить цвет правой границы
В этом примере показано, как настроить цвет правой границы.


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


Все 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 Устанавливает ширину четырех границ