border-style | CSS | WebReference
- Содержание
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Примечание
- Спецификация
- Браузеры
Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
border-style: [none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset] {1,4}Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Для управления видом границы предоставляется несколько значений свойства border-style. Вид зависит от используемого браузера и заданной толщины границы.
| 1 пиксель | 3 пикселя | 5 пикселей | 7 пикселей |
|---|---|---|---|
dotted | dotted | dotted | dotted |
dashed | dashed | dashed | dashed |
solid | solid | solid | solid |
double | double | double | double |
groove | groove | groove | groove |
ridge | ridge | ridge | ridge |
inset | inset | inset | inset |
outset | outset | outset | outset |
Кроме перечисленных в таблице значений используются следующие ключевые слова.
- none
- Не отображает границу и её толщина (border-width) задаётся нулевой.
- hidden
- Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.
| Число значений | Результат |
|---|---|
| 1 | Стиль границы будет задан для всех сторон элемента. |
| 2 | Первое значение устанавливает стиль верхней и нижней границ, второе — левой и правой. |
| 3 | Первое значение задаёт стиль верхней границы, второе — одновременно левой и правой границ, а третье — нижней границы. |
| 4 | Поочередно устанавливается стиль верхней, правой, нижней и левой границ. |
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
none hidden dotted dashed solid double groove ridge inset outset
div {
padding: 10px;
border: 5px #fc0;
border-style: {{ playgroundValue }};
}Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>border-style</title> <style> p { border-style: double; /* Стиль линии вокруг абзаца */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <p>Развивая эту тему, крещендирующее хождение просветляет миксолидийский райдер.
</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства border-style
Объектная модель
Объект.style.borderStyle
Примечание
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендация |
| CSS Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 4 | 7 | 12 | 1 | 3. 5 | 1 | 1 |
| 1 | 1 | 6 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Границы
См. также
- border-bottom-style
- border-left-style
- border-right-style
- border-top-style
- Граница в CSS
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.
02.2020
Редакторы: Влад Мержевич
border, border-radius
Итак, давайте изучим новое CSS-свойство, которое называется «border». Оно позволяет сделать вокруг нашего бокса либо прямоугольника, рамочку. Для этого мы пишем свойство «border» и набор непонятных символов.
.box{
border: 5px solid #ddd;
}
Давайте для начала посмотрим, что из этого получилось.
У нас получился квадрат и вокруг него такая серенькая рамочка.
Как мы это сделали? Давайте теперь понимать. У нас в «border’е» всегда указывается три параметра.
1) Первое – это толщина рамки, в данном случае 5px.
2) «Solid» – тип рамки, то есть она может быть сплошная, точечками, в общем, очень много есть разных параметров, я в основном использую либо «solid» – сплошной, либо «dotted» – точечками и ещё есть «dashed» – это пунктирными линиями. Другие типы я прикреплю в приложении к этому уроку, там вы можете посмотреть другие типы, потестировать их. Сейчас я на них останавливаться не буду.
Cамые часто используемые – это «solid», «dotted» и «dashed».
3) И третий параметр – это цвет рамки. Как задаётся цвет, мы с вами уже изучали, точно так же либо HEX-ом, либо через rgba, либо через rgb – без разницы. Главное, чтобы его задать.
Всё, на самом деле, очень просто: задаём «border», дальше толщину рамки, тип рамки и цвет рамки. Всё логично.
«Border», на самом деле, делится ещё на несколько подтипов «border’ов» и их очень много. Ну, как бы их очень много, но на самом деле их очень мало, просто есть некоторая логика, чтобы из очень мало сделать очень много. Сейчас об этом и поговорим.
Итак, первое – мы можем сделать рамку только сверху, либо только справа, либо только снизу иии… барабанная дробь… Как ещё? Правильно – слева! «Border-left». То есть «border-top», «border-right», «border-bottom» и «border-left».
.box{
border-left: 5px solid #ddd;
border-right: 5px solid #ddd;
border-bottom: 5px solid #ddd;
border-top: 5px solid #ddd;
}
Так же, мы можем задать еще 3 подсвойства:
1) -width
Мы можем задать «border-width» и перезадать значение толщины.
.box{
border: 5px solid #ddd;
border-width: 10px;
}
2) -style
Далее вы можете задать «border-style».
.box{
border: 5px solid #ddd;
border-style: dashed;
}Вы можете изменить его на «dashed». 5px осталось, мы не меняем сейчас, но изменили на «dashed».
3) -color
Ещё один параметр, который мы можем изменить – это «border-color» и здесь, соответственно, мы меняем цвет.
.box{
border: 5px solid #000;
border-color: #999;
}
Давайте изменим на такой вот светло-серенький. Цвет изменился с чёрненого на светло-серенький.
Так же, мы можем использовать эти подпараметры для border-top, -right, -bottom, -left. Например, вот так:
.box{
border: 5px solid #000;
border-top-color: #999;
border-bottom-width: 20px;
border-right-style: dotted;
}
И давайте я ещё дополню одним свойством, котрое называется «border-radius».
С помощью него мы можем сглаживать углы.
.box{
border: 5px solid #000;
border-radius: 20px;
}
Соответственно, тот радиус, который вы задаёте, таким радиусом сглаживаются ваши углы. И теперь, внимание, если «border-radius» задать размерностью в половину ширины и высоты, то неожиданно квадрат превращается в круг. Но чтобы каждый раз не считать количество пикселей, то можете просто задать 50% сглаживания, и тогда всегда получится ровный круг.
.box{
border: 5px solid #000;
border-radius: 50%;
}
В общем, вывод: вы можете сглаживать углы и можете сделать из квадратика кружочек, для этого радиус делаете 50%. И теперь на будущее вы можете делать не только квадратики и прямоугольнички, но так же и кружочки.
CSS Create Frames
Слово frame относится к границе или линии вокруг чего-либо, например изображения, содержимого, текста и т. д. Поэтому эта статья
имеет дело с созданием рамки вокруг элемента HTML, используя, конечно, CSS.
Например:
HTML с кодом CSS
<голова>
<стиль>
.container{позиция: относительная; ширина: 290 пикселей; высота: 100 пикселей;}
.frame{позиция: абсолютная; граница: 4 пикселя сплошного фиолетового цвета;}
.content{заполнение: 12px;}
<тело>
<дел>
<дел>
<дел>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde ipsa
mollitia minima sapiente, enim natus pariatur. Sunt adipisci culpa corporis.
