CSS outline-color Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The outline-color property in CSS allows developers to set the color of an element's outline. The outline is a line drawn around elements, outside the border edge, which can be used to emphasize or distinguish elements on the page.

By customizing the outline-color, you can enhance the visibility of interactive elements like buttons and form fields.

💡 Syntax

The syntax for the outline-color property is simple. You can specify a color using any valid CSS color value.

Syntax

Copied

element {
  outline-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

🎛️ Default Value

The default value of the outline-color property is the value of the color property of the element. If no outline-color is specified, the outline will use the current text color of the element.

🏠 Property Values

Value	Description
named-color	A color keyword, such as blue, red, green, etc.
hexadecimal value	A hex code representing a color, such as #ff5733.
RGB value	An RGB color value, such as rgb(255, 87, 51).
HSL value	An HSL color value, such as hsl(9, 100%, 60%).
currentcolor	The current value of the color property.

📄 Example

In this example, we’ll change the outline color of a button to a bright 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-color Example</title>
  <style>
    button {
      outline: 2px solid;
      outline-color: red;
    }
  </style>
</head>
<body>
  <h1>Button with Custom Outline Color</h1>
  <button>Click Me</button>
</body>
</html>

Using Hexadecimal Color

Here’s how to apply a hexadecimal color to the outline of 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-color Example</title>
  <style>
    input {
      outline: 3px solid;
      outline-color: #33cc33;
    }
  </style>
</head>
<body>
  <h1>Input Field with Custom Outline Color</h1>
  <input type="text" placeholder="Type here">
</body>
</html>

🖥️ Browser Compatibility

The outline-color property is widely supported across modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, as always, it's advisable to test your website in various browsers to ensure consistent appearance.

🎉 Conclusion

The outline-color property is a useful tool for enhancing the visibility and accessibility of elements on your webpage.

By customizing the color of the outline, you can make interactive elements stand out and improve the overall user experience. Experiment with different colors and styles to achieve the desired effect for your design.