CSS outline Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

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

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.

index.html

Copied

<!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

<!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.