- dotted - dotted outline
- dashed - dashed outline
- solid- solid outline
- double- double outline
- groove- 3D grooved outline depends on the outline-color value
- ridge- 3D ridged outline depends on the outline-color value
- inset- 3D inset outline depends on the outline-color value
- outset- 3D outset outline depends on the outline-color value
- none- no outline
- hidden- hidden outline
The outline is a line that goes around the element, outside of the border. In contrast to borders, outlines do not take any space in the box model. So adding an outline to an element does not affect the position of the element or other elements.
In addition, outlines can be non-rectangular in some browsers. This can happen if the outline is applied to a span element that has text with different font-size properties inside it. Unlike borders, outlines cannot have rounded corners.
The essential parts of the outline are outline-color, outline-style, and outline-width.
The definition of an outline is equivalent to the definition of a border:
The outline-style property is used to set the style of the outline of an element.
ATutorialHub Related Guide
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website