CSS Outline
CSS outline is a shorthand property that sets the outline around an element, which can be useful for accessibility or design purposes. Unlike borders, outlines do not affect the element's layout or occupy space. They’re drawn outside the element’s border edge.
Properties of outline
outline-color: Sets the color of the outline.outline-style: Defines the style of the outline (e.g., solid, dashed, dotted).outline-width: Specifies the thickness of the outline.
You can also use the outline shorthand property to set all three properties at once.
Example Usage
Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outline Example</title>
<style>
.outline-example {
margin: 20px;
padding: 20px;
border: 2px solid black;
outline: 4px dashed red;
}
</style>
</head>
<body>
<div class="outline-example">This element has an outline.</div>
</body>
</html>
In this example, the .outline-example class applies a 4px wide, dashed, red outline around the element. The outline is drawn outside the border of the element, which does not affect its size or layout.
Outline with Different Properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outline Properties Example</title>
<style>
.outline-different {
margin: 20px;
padding: 20px;
border: 2px solid black;
outline-color: blue;
outline-style: dotted;
outline-width: 3px;
}
</style>
</head>
<body>
<div class="outline-different">This element has a blue dotted outline.</div>
</body>
</html>
In this example, different properties are set individually. The outline-color is blue, outline-style is dotted, and outline-width is 3px.
Notes
- Outline vs. Border: The outline is drawn outside the border, and it does not affect the layout. It’s useful for indicating focus (e.g., for keyboard navigation) or for temporary visual effects.
- Outline Offset: You can use the
outline-offsetproperty to adjust the position of the outline relative to the element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outline Offset Example</title>
<style>
.outline-offset-example {
margin: 20px;
padding: 20px;
border: 2px solid black;
outline: 4px solid green;
outline-offset: 10px;
}
</style>
</head>
<body>
<div class="outline-offset-example">This element has an outline with offset.</div>
</body>
</html>
In this case, the outline-offset property moves the outline 10px away from the element’s border.
These examples should help you understand and use CSS outlines effectively!
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.