CSS – Outlines
CSS – Outlines
To specify an outline within an element, different properties in the HTML page can be given using CSS. These properties are as below,
outline-color: it specifies the outline’s color as color’s name, hex color code and RGB value.
outline-style: it specifies the type of the line like solid, double line, dashed line, dotted, inset, outset, hidden, etc.
outline-width: it determines the width of the outline like thin, medium, thick, in px unit, etc.
outline: this property sets all three types of features in one statement.
Example:
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;outline-color:blue">
This text is having a thin outline, solid style and blue colored.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;outline-color:#009990">
This text is having a thick outline, dashed style and hex-color.
</p>
<br />
<p style = "outline-width:10px; outline-style:dotted;outline-color:rgb(7,80,250)">
This text is having 10x outline, dotted style and rgb-color.
</p>
<br />
<p style = "outline:3px dashed rgb(10,55,250);">
This text is having 3px dashed blue outline- shorthand.
</p>
</body>
</html>
Output:
Quiz:Quiz 1: How can you change various properties of outlines using CSS?
Quiz 2: What is the difference between border and outline?