March 1Mar 1 Administrators CSS Outline An outline is a line drawn around an element, outside the element's border. This element has a black border and a green outline with a width of 10px. Try it Yourself » CSS Outline An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out". Note: Outline differs from borders! The outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline. CSS has the following outline properties: outline-style - Specifies the style of the outline outline-color - Specifies the color of the outline outline-width - Specifies the width of the outline outline-offset - Adds space between the outline and the edge/border of an element outline - A shorthand property CSS The outline-style Property The outline-style property specifies the style of the outline, and can have one of the following values: dotted - Defines a dotted outline dashed - Defines a dashed outline solid - Defines a solid outline double - Defines a double outline groove - Defines a 3D grooved outline ridge - Defines a 3D ridged outline inset - Defines a 3D inset outline outset - Defines a 3D outset outline none - Defines no outline hidden - Defines a hidden outline The following example shows the different outline-style values: Example Demonstration of the different outline styles: p.dotted {outline-style: dotted;} p.dashed {outline-style: dashed;}p.solid {outline-style: solid;} p.double {outline-style: double;}p.groove {outline-style: groove;} p.ridge {outline-style: ridge;}p.inset {outline-style: inset;} p.outset {outline-style: outset;} Result: A dotted outline. A dashed outline. A solid outline. A double outline. A groove outline. The effect depends on the outline-color value. A ridge outline. The effect depends on the outline-color value. An inset outline. The effect depends on the outline-color value. An outset outline. The effect depends on the outline-color value. Try it Yourself » Note: None of the other outline properties (which you will learn more about in the next chapters) will have ANY effect unless the outline-style property is set! ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.