The outline-width property can be defined to draw a line of specific thickness around the borders of the element, but the outline is not a part of an element’s dimensions, unlike border property.
Syntax
The syntax of CSS outline-width property is as follows −
Selector { outline-width: /*value*/ }
NOTE − The outline-style property needs to be defined before declaring outline-width.
Let’s see an example for the outline-width property −
Example
<!DOCTYPE html> <html> <head> <title>CSS outline-width</title> <style> span { margin: 15px; padding: 20px; border-style: solid; border-color: limegreen crimson; position: absolute; outline-width: 5px; outline-style: ridge; outline-color: orange; border-radius: 50%; } #showDiv { margin:auto; border-style: solid; border-color: darkmagenta dodgerblue; outline-style: dotted; outline-color: black; height: 80px; width: 80px; } #container { width:50%; margin:50px auto; } </style> </head> <body> <div id="container"> <div id="showDiv"><span></span></div> </div> </body> </html>
Output
Following is the output for the above code −
Example
Let’s see another example for the outline-width property −
<!DOCTYPE html> <html> <head> <title>CSS outline-width</title> <style> #container { width:50%; margin:50px auto; } p { margin:auto; border-style: ridge; border-width: 15px; border-color: lightblue; outline-style: solid; outline-color: darkviolet; } </style> </head> <body> <div id="container"> <p>Learning is fun with examples and live running code.</p> </div></body></html>
Output
Following is the output for the above code −