Обводка css блока: border-radius — CSS | MDN

Рамка блока в CSS

Главная > Учебник CSS >

Создание рамки блока

У блока может быть рамка. Она обозначает границы блока. При этом внутренний отступ, находится внутри блока, то есть внутри рамки, а внешний отступ снаружи рамки. Рамка занимает своё место на странице и не входит ни во внешний отступ, ни во внутренний. Для создания рамки нужно указать три свойства:

• ширину рамки
• стиль рамки
• цвет

Для указания ширины рамки используется свойство border-width. Оно может принимать следующие значения:

border-width: medium — средняя (по умолчанию)

border-width: thin — тонкая

border-width: thick — толстая

border-width: ширина в единицах измерения CSS

border-width: inherit — значение принимается от родительского элемента

Чаще всего ширину указывают в каких-либо единицах измерения, существующих в CSS.

Стиль рамки устанавливается с помощью свойства border-style. В зависимости от этого свойства рамки выгдядят по-разному.

При маленькой ширине рамка может выглядеть по-другому.

Кроме указанных значений, свойство border-style может принимать следующие значения:

border-style: none — отсутствие рамки

border-style: hidden — то же, что и none, применяется к ячейке таблицы

border-style: inherit — значение принимается от родительского элемента

Цвет рамки устанавливает свойство border-color. В значении указывается цвет одним из способов, существующих в CSS.

Создадим блок и зададим ему рамку.

Стиль:

+

#div1
  {
  border-width: 1px;
  border-style: solid;
  border-color: Red;
  }

HTML код:

<div>Блок с рамкой</div>

Попробуйте задать блоку рамку с другими значениями свойств.

Сокращённая запись

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

• ширина
• стиль
• цвет

Cоздадим блок с такой же рамкой, но установим её с помощью сокращённой записи.

<div>Блок с рамкой</div>

Если не указать ширину или цвет, то будет использовано значение по умолчанию.

Отдельные стороны рамки

Рамку блоку можно задать не целиком, а с каждой стороны по-отдельности. У разных сторон рамки может быть отдельный стиль. С одной стороны может быть рамка, а с другой может её не быть. В общем, у Вас есть полная свобода действий.

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

<div>Блок<br>с рамкой<br>слева</div>

Создайте рамку у этого блока с других сторон с разным видом.

Для любой стороны рамки можно указать каждое свойство отдельно:

border-left-width, border-left-style, border-left-color

border-right-width, border-right-style, border-right-color

border-top-width, border-top-style, border-top-color

border-bottom-width, border-bottom-style, border-bottom-color

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

Для примера создадим блок, у которого рамка имеет со всех сторон разную ширину.

Стиль:

#div2
  {
  border-width: 5px 2px 3px 7px;
  border-style: solid;
  border-color: #D118CB;
  }

HTML код:

<div>Блок с рамкой с разной шириной</div>

Свойству также можно указать два или три значения. Если указано два значения, то первое значение указывается для верхней и нижней части рамки, а второе для левой и правой. Если указано три значения, то первое значение указывается для верхней части рамки, второе значение для левой и правой части, а третье для нижней части.

Как создать блок с градиентной обводкой? / Хабр

Представим ситуацию: перед вами встало сверх задание — нужно сделать на сайте блок с градиентной обводкой. Нужно сразу понимать, что для этого не существует простого и очевидного CSS API. Это значит, что для получения необходимого визуального эффекта нам нужно писать определенные “костыли”. Предлагаю рассмотреть 2 подхода к решению этой задачи. 

Автор статьи Gradient Borders in CSS Крис Койер предлагает пойти простым путем. Можно сделать “элемент-обертку” с линейно-градиентным фоном, а затем внутренним элементом заблокировать большую часть фона, кроме тонкой линии вокруг нее. Выглядеть это будет следующим образом:

Давайте пошагово разберем, что сделано в данном примере. У нас есть 2 блока — “обертка” и текст. “Обертке” задан градиент и без наложения второго блока она выглядит так:

Текстовый блок находиться внутри этой “обертки” и его фон такой же как и фон окружения. Какие проблемы из-за этого могут появиться?

1. Вот что будет, если внутреннему блоку не задать фон:

2. А на следующем примере мы увидим, что будет, если внешний фон не совместим с внутренним:

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

Усложним себе задачу и попробуем сделать скругленные углы обводки. На примере от Криса Коера с этим нет проблем. 

Но рассмотрим этот же пример в более реалистичной среде. На одном из проектов, над которыми работает наша студия, нам нужно было создать кнопки-теги с обводкой всего в 1 px (на приведенном выше примере бордер толщиной в целых 5 px).

Этот пример достаточно показательный, ведь чаще всего обводка должна быть именно в 1 px. Тут врывается проблема с рендерингом браузера. Если настоящую обводку браузер почти всегда интерпретирует правильно (она всегда выглядит как 1 px вокруг блока), то данный подход такого не гарантирует. Если присмотреться — то обводка блоков в разных местах имеет разную ширину, и может меняться в зависимости от разрешения экрана. Когда элемент относительно маленький, то этого никто может и не заметить, но с большой красивой кнопкой с визуально разной шириной бордера сверху и снизу смириться будет сложно.

Еще одним минусом становится анимация градиента. Для обводки шириной в 1 px анимация будет выглядеть мгновенной. На полноценную анимацию может уйти уйма времени и нервных клеток программиста. 

Рассмотрим второй подход к созданию градиентной обводки. В статье Как сделать border градиентом автор предлагает использовать достаточно хитрое свойство border-image-slice в сочетании с border-image:

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

Что же не так с этим моментом? Радиус попросту не применяется. То есть когда мы прописываем свойство CSS, то оно никак не влияет на отображение блока. 

И вот что мы получаем в результате:

Дальше в статье приводится пример с закругленными углами. Здесь применяется такой же метод, как и в предыдущем примере — “блок-обертка” и блок с контентом, который его перекрывает. 

Давайте подведем итоги этого разбора:

1. CSS на данный момент не предоставляет возможности сделать блок с градиентной обводкой, добавить ей закругленные углы и одновременно сделать блок прозрачным.

2. Если сделать блоки с градиентом обводкой в 1–2 px, то нужно быть готовым, что ширина этой обводки будет неравномерной.

3. Ограничения касаются только блоков с градиентной обводкой и радиусом бордера.

Вместо заключения

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

border-block — CSS: Каскадные таблицы стилей

border-block можно использовать для установки значений одного или нескольких из border-block-width , border-block-style и border-block-color , устанавливая как начало, так и конец в размер блока сразу. Физические границы, на которые он сопоставляется, зависят от режима записи элемента, его направленности и ориентации текста. Это соответствует border-top и border-bottom или border-right и border-left свойства в зависимости от значений, определенных для write-mode , direction и text-orientation .

Границы в другом измерении могут быть установлены с помощью

Это свойство является сокращением для следующих свойств CSS:

• цвет рамки
• бордюрный блок
• ширина блока границ

 бордюрный блок: 1px;
бордюрный блок: 2 пикселя с точками;
бордюр: средний пунктирный синий;
/* Глобальные значения */
пограничный блок: наследовать;
бордюрный блок: начальный;
пограничный блок: вернуться;
пограничный блок: обратный слой;
пограничный блок: не установлен;
 

Значения

Пограничный блок определяется одним или несколькими из следующих элементов в любом порядке:

<'ширина-границы'>

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

.

<'бордюрный стиль'>

Стиль линии границы. См. стиль границы .

<цвет>

Цвет границы.

 border-block = 
 <'border-block-start'> 

Граница с вертикальным текстом

HTML

 

  
Пример текста

 

CSS

 раздел {
  цвет фона: желтый;
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
. exampleText {
  режим письма: вертикальный-rl;
  бордюрный блок: 5 пикселей, пунктирный синий;
}
 

Результаты

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

• Логические свойства и значения CSS
• Это свойство соответствует одному из свойств физических границ: border-top , border-right , border-bottom или border-left .
• режим письма , направление , ориентация текста

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 11 апреля 2023 г. участниками MDN.

border-block-style — CSS: Каскадные таблицы стилей

Свойство CSS border-block-style определяет стиль границ логического блока элемента, который сопоставляется с физическим стилем границы в зависимости от режим письма, направленность и ориентация текста. Это соответствует border-top-style и border-bottom-style , или border-left-style и border-right-style свойства в зависимости от значений, определенных для write-mode , direction , и текстовая ориентация .

Стиль границы в другом измерении может быть установлен с помощью border-inline-style

 /* значения <'border-style'> */
бордюрный стиль: пунктир;
стиль бордюрного блока: пунктирный;
стиль бордюрного блока: канавка;
/* Глобальные значения */
стиль пограничного блока: наследовать;
стиль пограничного блока: начальный;
стиль пограничного блока: вернуться;
стиль пограничного блока: обратный слой;
стиль пограничного блока: не установлен;
 

Значения

<'border-style'>

Стиль линии границы. См. стиль границы .

 стиль границы-блока = 
 <'border-top-style'>{1,2} 

Пунктирная рамка с вертикальным текстом

HTML

 

  
Пример текста

 

CSS

 раздел {
 цвет фона: желтый;
 ширина: 120 пикселей;
 высота: 120 пикселей;
}
.