Границы

Обновлено: 20.01.2023

Границы

Свойства, устанавливающие рамки и линии вокруг элементов.

• background-clip

  background-clip

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

• border

  border

  Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.

• border-bottom

  border-bottom

  Свойство позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

• border-bottom-color

  border-bottom-color

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

• border-bottom-left-radius

  border-bottom-left-radius

  Устанавливает радиус скругления левого нижнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

• border-bottom-right-radius

  border-bottom-right-radius

  Устанавливает радиус скругления правого нижнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

• border-bottom-style

  border-bottom-style

  Устанавливает стиль границы внизу элемента.

• border-bottom-width

  border-bottom-width

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

• border-color

  border-color

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

• border-image

  border-image

  Используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.

• border-left

  border-left

  Свойство border-left позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

• border-left-color

  border-left-color

  Задаёт цвет границы слева от элемента.

• border-left-style

  border-left-style

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

• border-left-width

  border-left-width

  Устанавливает толщину границы слева от элемента.

• border-radius

  border-radius

  Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

• border-right

  border-right

  Свойство border-right позволяет одновременно установить толщину, стиль и цвет правой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

• border-right-color

  border-right-color

  Задаёт цвет границы справа от элемента.

• border-right-style

  border-right-style

  Устанавливает стиль границы справа от элемента.

• border-right-width

  border-right-width

  Устанавливает толщину границы справа от элемента.

• border-style

  border-style

  Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

• border-top

  border-top

  Свойство border-top позволяет одновременно установить толщину, стиль и цвет границы сверху элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

• border-top-color

  border-top-color

  Задаёт цвет границы сверху элемента.

• border-top-left-radius

  border-top-left-radius

  Устанавливает радиус скругления левого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

• border-top-right-radius

  border-top-right-radius

  Устанавливает радиус скругления правого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

• border-top-style

  border-top-style

  Встановлює стиль межі зверху елемента.

• border-top-width

  border-top-width

  Встановлює товщину межі зверху елемента.

• border-width

  border-width

  Задаёт толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа значений.

• outline

  outline

  Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента. В отличие от линии, задаваемой через border, у свойства outline есть следующие особенности:

• outline-color

  outline-color

  Указывает цвет внешней границы элемента. В отличие от линии, задаваемой через border, линия через свойство outline отображается вокруг элемента, не влияя на ширину блока или его положение.

• outline-offset

  outline-offset

  Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border.

• outline-style

  outline-style

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

• outline-width

  outline-width

  Визначає товщину зовнішньої межі елемента. На відміну від властивості border-width, для outline-width не можна задати межу для кожної сторони елемента індивідуально.