Характеристики свойства
В каких браузерах работает?
8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
В каких версиях CSS используется?
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
- | + | + | + |
Для чего используется?
Чтобы управлять внешним видом левой границы в CSS прописано свойство border-left-style. Это узконаправленное свойство и отвечает только за корректировку стилистики. Чтобы одновременно управлять внешним видом, толщиной и цветом границы, необходимо воспользоваться свойством border-left. В нем можно через пробел одновременно прописывать вышеупомянутые характеристики, но только для левой границы. Чтобы сделать тоже самое для всех сторон блока - необходимо воспользоваться свойством border.
Как правильно задавать?
border-left-style: стиль линии;
Какие могут быть значения?
- none - убирает рамки из вывода.
- hidden - соответствует функциям значения none, но применяется только для таблиц.
- dotted - линия рамки представлена точками.
- dashed - граница представлена пунктирной полосой.
- solid - обычная не прерывистая линия.
- double - рамка представлена двумя тонкими параллельными полосами.
- groove - представляет трехмерный эффект вдавленной рамки.
- ridge - представляет трехмерный эффект выпуклой рамки.
- inset - эффект объемной линии в двухмерном формате.
- outset - эффект объемной линии в двухмерном формате.
- inherit - повторяет рамку родительского элемента
.
Наглядный пример использования различных видов рамок:
dotted dashed solid double groove ridge inset outset
Наибольшее распространение на практике получили двухмерные линии, однако довольно часто используются объемные рамки для создания эффекта трехмерной кнопки, которая, к примеру, отвечает за выплывание формы обратной связи. Такой прием очень популярен при создании Landing Page.
Пример использования
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Свойство border-left-style</title> <style> .border { border: 4px double #b8b8b8; background: #b04d4d; color:#eee; padding: 15px; } p { border-left-color:#b8b8b8; border-left-style: solid; border-left-width: 2px; padding:0px 5px; width:300px; } </style> </head> <body> <div class="border"> <p>Текст, который будет заключен в специальную рамку для наглядности примера.</p> </div> </body> </html>