CSS Properties
CSS outline Property
Photo Credit to CodeToFun
Introduction
The outline
property in CSS is used to create an outline around elements. This outline is similar to a border but has some key differences, such as not affecting the layout or taking up space. Itβs often used to highlight elements, such as when a user interacts with form controls or navigates a page using the keyboard.
Syntax
The outline
property is a shorthand property for setting the following individual outline properties: outline-color, outline-style, and outline-width.
element {
outline: [outline-width] [outline-style] [outline-color];
}
Default Value
The default value of the outline
property is medium none color. This means that if no values are specified, the outline will not be visible.
Property Values
Value | Description |
---|---|
outline-width | Defines the thickness of the outline. Values can be thin, medium, thick, or a specific length (e.g., 2px). |
outline-style | Specifies the style of the outline. Possible values include none, solid, dashed, dotted, double, groove, ridge, inset, and outset. |
outline-color | Sets the color of the outline. Values can be named colors, hexadecimal values, RGB, RGBA, HSL, HSLA, or currentColor. |
Example
In this example, we apply a solid outline around a button with a thickness of 3px and a color of red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS outline Example</title>
<style>
button {
outline: 3px solid red;
}
</style>
</head>
<body>
<h1>Button with Outline</h1>
<button>Click Me!</button>
</body>
</html>
Example: Using Outline Properties
In this example, we use individual outline properties to create a dashed outline around an input field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS outline Properties Example</title>
<style>
input[type="text"] {
outline-width: 2px;
outline-style: dashed;
outline-color: blue;
}
</style>
</head>
<body>
<h1>Input Field with Dashed Outline</h1>
<input type="text" placeholder="Type here">
</body>
</html>
Browser Compatibility
The outline
property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is also well-supported in older versions of browsers, making it a reliable choice for styling.
Conclusion
The outline
property is a versatile tool for adding visual emphasis to elements on a webpage. It provides a simple way to enhance accessibility and highlight interactive elements without affecting the layout. By adjusting the outlineβs width, style, and color, you can create various visual effects that improve the user experience on your site.
Join our Community:
Author
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS outline Property), please comment here. I will help you immediately.