Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS outline Property

Posted in CSS Tutorial
Updated on Oct 07, 2024
By Mari Selvan
πŸ‘οΈ 23 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
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.

Syntax
Copied
Copy To Clipboard
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

ValueDescription
outline-widthDefines the thickness of the outline. Values can be thin, medium, thick, or a specific length (e.g., 2px).
outline-styleSpecifies the style of the outline. Possible values include none, solid, dashed, dotted, double, groove, ridge, inset, and outset.
outline-colorSets 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.

index.html
Copied
Copy To Clipboard
<!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.

index.html
Copied
Copy To Clipboard
<!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:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

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

Share Your Findings to All

Subscribe
Notify of
guest


1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy