ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

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

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

CSS Адаптивный

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

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

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

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

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Границы


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

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

Результат:

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

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

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

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

Нормальная граница

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

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

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

Пример

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