С помощью свойства outline-style можна задавать стиль обводки вокруг какого-либо элемента. Контур отображается поверх элемента. Это свойство хорошо работает во всех современных браузерах
Значения, которые может принимать свойство outline-style:
-dotted- граница в точку;
-solid- простая гарница
-double-г раница отображается в виде двух линий
-dashed- граница ввиде пунктирной линии
-groove- граница ввиде вдавленной рамки
-ridge- граница ввиде выступающе рамки
-inset- граница с 3D эффектом.Осветляется правый нижний угол границы
-outset- граница с 3D эффектом.Осветляется левый верхний угол границы
Рассмотрим пример. В html создадим поле ввода и для него зделаем обводку(границу).
Код в css:
На примере для строки ввода мы создали границу groove. Также мы задали толщину границы и цвет чтобы можна было увидеть эффект. Можна такие границы создавать и для других элементов(кнопок, ссылок и т.д.)