Границы

Обновлено: 30.05.2022

Границы

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

  • 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 нельзя задать границу для каждой стороны элемента индивидуально.