he CSS outline property is similar to the border property but offers a few differences. It is used to draw a line around elements, which is positioned outside the element’s border. This can help to highlight or draw attention to specific elements on a web page. Unlike borders, outlines do not take up space and do not affect the layout of the element.
Here are the key properties associated with CSS outlines:
• outline-style
• outline-color
• outline-width
• outline-offset
• outline
Definition: Specifies the style of the outline.
Values: none, solid, dashed, dotted, double, groove, ridge, inset, outset.
outline-style: solid; /* This will create a solid outline around the element*/
Definition: Sets the color of the outline.
Values: Can be a color name (blue), hex code (#0000FF), RGB (rgb(0, 0, 255)), or RGBA (rgba(0, 0, 255, 0.5)).
outline-color: #3498db; /*This will set the outline color to a shade of blue*/
Definition: Specifies the width of the outline.
Values: Can be in length units such as px, em, rem (e.g., 2px, 0.5em).
outline-width: 3px; /* This will set the outline width to 3 pixels*/
Definition: Determines the distance between the outline and the edge of the element’s border.
Values: Can be in length units such as px, em, rem (e.g., 5px, 1em).
outline-offset: 5px; /* This will offset the outline by 5 pixels from the border. */
Definition: A shorthand property for setting all the individual outline properties (outline-style, outline-color, outline-width) in one declaration.
Values: outline: [outline-width] [outline-style] [outline-color];
outline: 2px dashed red; /* This will apply a 2-pixel wide dashed red outline around the element*/
<!DOCTYPE html>
<html>
<head>
<title>CSS Outline Styles</title>
<style>
.outline-example {
border: 1px solid black; /* Border for context */
padding: 20px;
margin: 20px;
background-color: #f9f9f9;
}
.outline-none {
outline-style: none; /* No outline */
}
.outline-solid {
outline-style: solid; /* Solid line */
outline-color: #3498db; /* Color for visibility */
outline-width: 3px;
}
.outline-dashed {
outline-style: dashed; /* Dashed line */
outline-color: #e74c3c; /* Color for visibility */
outline-width: 3px;
}
.outline-dotted {
outline-style: dotted; /* Dotted line */
outline-color: #2ecc71; /* Color for visibility */
outline-width: 3px;
}
.outline-double {
outline-style: double; /* Double line */
outline-color: #f39c12; /* Color for visibility */
outline-width: 4px;
}
.outline-groove {
outline-style: groove; /* Groove line */
outline-color: #9b59b6; /* Color for visibility */
outline-width: 4px;
}
.outline-ridge {
outline-style: ridge; /* Ridge line */
outline-color: #1abc9c; /* Color for visibility */
outline-width: 4px;
}
.outline-inset {
outline-style: inset; /* Inset line */
outline-color: #34495e; /* Color for visibility */
outline-width: 4px;
}
.outline-outset {
outline-style: outset; /* Outset line */
outline-color: #e67e22; /* Color for visibility */
outline-width: 4px;
}
</style>
br'
</head>
<body>
<div class="outline-example outline-none">
Outline: None
</div>
<div class="outline-example outline-solid">
Outline: Solid
</div>
<div class="outline-example outline-dashed">
Outline: Dashed
</div>
<div class="outline-example outline-dotted">
Outline: Dotted
</div>
<div class="outline-example outline-double">
Outline: Double
</div>
<div class="outline-example outline-groove">
Outline: Groove
</div>
<div class="outline-example outline-ridge">
Outline: Ridge
</div>
<div class="outline-example outline-inset">
Outline: Inset
</div>
<div class="outline-example outline-outset">
Outline: Outset
</div>
</body>
</html>