border — style
Рамку можно сделать двойной, пунктирной и даже объёмной в точку! И всё это одним свойством.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 28 августа 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство border — style управляет стилем рамки элемента.
Пример
Скопировать ссылку «Пример» Скопировано
Вокруг абзаца текста будет рамка, состоящая из чёрточек:
p border-style: dashed;>p border-style: dashed; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Стиль рамки задаётся при помощи ключевых слов:
- none — отключает рамку (значение по умолчанию).
- solid — сплошная рамка. Этот стиль используется чаще всего.
- dotted — рамка состоит из точек с пробелами между ними.
- dashed — рамка состоит из коротких чёрточек с пробелами между ними.
- double — рамка состоит из двух сплошных линий с небольшим нерегулируемым отступом между ними.
Редкие значения
Скопировать ссылку «Редкие значения» Скопировано
Ниже будут перечислены редко используемые стили рамки:
- groove — рамка объёмная, с тенями от источника света, находящегося в верхнем левом наружном углу.
- ridge — рамка объёмная, с тенями от источника света, находящегося в нижнем правом внешнем углу.
- inset — рамка с тенями от источника света, находящегося в нижнем правом внутреннем углу.
- outset — рамка с тенями от источника света, находящегося в левом верхнем внутреннем углу.
Понять текстовое описание этих стилей довольно сложно, посмотрите пример ниже:
Как понять
Скопировать ссылку «Как понять» Скопировано
Свойство border — style является шорткатом для свойств:
- border — bottom — style
- border — left — style
- border — right — style
- border — top — style
Но без особой необходимости эти свойства отдельно не используются. Более того, чаще всего стиль рамки задаётся внутри шортката border .
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Достаточно определить стиль рамки для того, чтобы она появилась вокруг элемента. Остальные значения будут установлены в значения по умолчанию: ширина рамки 3 пикселя, а цвет такой же, как унаследованный цвет текста (по умолчанию — чёрный).
�� Если рамка тонкая, например, 1 пиксель, то внешне значение double почти не будет отличаться от solid . Для визуальной разницы задавайте рамку большей ширины.
�� Если border — style свойство применяется к таблице со свойством border — collapse в значении collapsed , то inset будет вести себя как groove , outset — как ridge .
Создание рамок средствами CSS
Теперь давайте перейдём от преобразований текста, к созданию различных красивостей вокруг него, и первой такой красивостью будет рамка.
Для начала рассмотрим, самые простые рамки. Для их создания, в CSS используется свойство border , которому можно задать следующие значения:
solid – сплошная рамка;
dashed – пунктирная рамка;
dotted – точечная рамка;
double – рамка двойной линией;
groove – рамка с тенью;
ridge — с рельефом;
Ещё два свойства необходимые для создания простых рамок — это
widht – толщина рамки;
color – цвет рамки;
Согласно техники сокращения, записываются значения, одной строкой, через пробел.
p border : 2px solid #ffff00 ;
>
Далее задаются отступы для рамок. Задаются они следующими свойствами:
padding – внутренний (отступ рамки от содержания);
margin — внешний (отступ рамки от внешних объектов);
Ещё для отступов задаются направления (с какой стороны на сколько отступить). Эти свойства применяются, когда возникает необходимость разместить содержимое не по центру рамки, или саму рамку с каким либо смещением.
top – отступ сверху;
righnt – отступ cправа;
bottom – отступ снизу;
left – отступ слева
Записываются значения этих свойств в сокращённом варианте друг за другом ( padding: 10px 30px 15px 20px ), и первым ставится значение top , а дальше по часовой стрелке остальные.
Если поставить только одно значение, то это будет значить, что отступ со всех сторон будет одинаковый.
p border : 2px solid #ffff00 ;
padding : 10px 20px 10px 20px ;
margin : 20px ;
>
Если нужно разместить текст, или изображение по центру рамки, то в селектор «p» можно добавить свойство text-align: center ;
Далее рассмотрим, как задаются высота и ширина рамки. Высота рамки задаётся браузером автоматически, и выбирается таким образом, чтобы в нем уместилось содержание, с учётом заданных отступов. А вот ширину мы с вами будем задавать самостоятельно.
Задаётся она свойством width, и в значении его указывается желаемый размер в пикселях, или других мерах длины, принятых в веб.
p border : 2px solid #ffff00 ;
padding : 10px 20px 10px 20px ;
margin : 20px ;
width : 400px ;
>
Кстати, запомните, что при задании ширины, браузер это значение понимает, как ширину только содержимого. Затем к этому значению он добавляет заданные отступы и толщину рамки, и окончательный размер отображает на странице.
И последнее, что необходимо сделать — это расположить рамку на странице. Делается это при помощи, уже имеющегося, свойства margin.
А если нужно просто расположить блок рамки по центру страницы, то в свойство margin добавляется значение auto.
p border : 2px solid #ffff00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
>
Для первого примера создадим html документ, и создадим рамки solid для блока body (тело документа), и одному абзацу.
В следующих примерах будет изменяться только CSS (то, что заключено в тег style ).
< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Документ без названия< /title >
< style >
body border : 2px solid #E5FA05 ;
>
p text-indent : 30px ;
border : 2px solid #ffff00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
>
< /style >
< /head >
< body >
< p >Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.
Следующая рамка dashed (пунктир).
p <
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
>
p <
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
>
p <
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
>
p <
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
>
p <
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
>
Дальше немного интереснее. Создадим рамку с закруглёнными уголками.
Для этого уберём border , и добавим border-radius и box-shadow .
p <
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
>
Размоем внешний край рамки. Для этого в свойстве box-shadow , увеличим третью цифру.
p <
border-radius : 10px ;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
>
Сделаем разноцветную рамку. Для этого в свойство box-shadow , через запятую, добавим ещё несколько комплектов значений с разными цветами.
p <
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
>
Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius
p <
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding : 40px ;
margin : 20px auto ;
width : 130px ;
height : 130px ;
text-align : center;
>
Если поиграть с дробным значением border-radius , можно сделать эллипс любого вида.
Первое число в дроби — это изгиб вертикальной составляющей угла, второе — горизонтальной.
И последнее, что мы сегодня сделаем — рамка с изменяющимся цветом. Изменяться он будет при наведении курсора.
Реализуется эта опция при помощи псевдокласса :hover .
p <
border-radius : 10px ;
box-shadow : 0 0 0 4px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
>
p:hover <
border-radius : 10px ;
box-shadow : 0 0 0 4px #00ff62 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
>
В спокойном состоянии:
При наведении курсора:
Этот же метод можно применить к разноцветной рамке, и менять при наведении курсора, какой нибудь один цвет.
Желаю творческих успехов.
Неужели не осталось вопросов? Спросить
Перемена
На улице Дублина двое ирландцев дерутся. К ним подходит еще один, снимает шляпу и спрашивает:
— Простите, это частная драка или любой может вмешаться.
CSS: Наследование стилей
При использовании стилей в CSS часто затрагивается не только тот элемент, для которого указаны стили, но и вложенные в него теги. Такие стили называются наследуемые. Стиль font-size из прошлого урока является наследуемым — он применится ко всем вложенным тегам.
Размер шрифта, которым написан этот текст — 20 пикселей. Вложенный параграф также будет иметь размер шрифта 20 пикселей.
Размер шрифта, которым написан этот текст — 20 пикселей.
Вложенный параграф также будет иметь размер шрифта 20 пикселей.
Помимо стилей, которые наследуются для всех вложенных тегов, в CSS есть множество стилей, которые уникальны для того элемента, к которому их применили.
Одним из таких свойств является border , позволяющий установить рамку вокруг элемента. Но эта же рамка не будет копироваться для каждого внутреннего элемента.
У блока появится рамка шириной 2 пикселя А у параграфа своей рамки не будет. При необходимости она устанавливается отдельно
Например, вот так
У блока появится рамка шириной 2 пикселя
А у параграфа своей рамки не будет. При необходимости она устанавливается отдельно
Например, вот так
Задание
Добавьте в редактор тег и, используя атрибуты, установите размер шрифта в 20 пикселей. Внутри тега вложите параграф с размером шрифта 10 пикселей
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Определения
- Наследуемые свойства — свойства, которые устанавливаются не только для элемента, но и для всех элементов внутри него, включая вложенные
border-width
Задаёт толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа значений.
Краткая информация
| Значение по умолчанию | medium |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис
border-width: [ | thin | medium | thick]
Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
Три переменные — thin (2 пикселя), medium (4 пикселя) и thick (6 пикселей) задают толщину границы. Для более точного значения толщину можно указывать в пикселях или других единицах.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и приведён в табл. 1.
| Число значений | Результат |
|---|---|
| 1 | Толщина границы будет установлена для всех сторон элемента. |
| 2 | Первое значение устанавливает толщину верхней и нижней границ, второе — левой и правой. |
| 3 | Первое значение задаёт толщину верхней границы, второе — одновременно левой и правой границ, а третье — нижней границы. |
| 4 | Поочерёдно устанавливается толщину верхней, правой, нижней и левой границ. |
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
div < background: #e4efc7; border: dotted #333; padding: 10px; border-width: >px; >
Пример
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства border-width
Объектная модель
Объект.style.borderWidth
Примечание
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .
Толщина границы при использовании ключевых слов thin , medium и thick в разных браузерах может несколько различаться.
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация |
| CSS Level 2 (Revision 1) | Рекомендация |
| CSS Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 4 | 8 | 12 | 1 | 9.2 | 1 | 1 |
| 1 | 1 | 6 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- border-bottom-width
- border-left-width
- border-right-width
- border-top-width
- Граница в CSS