Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS outline-color Property

Posted in CSS Tutorial
Updated on Oct 07, 2024
By Mari Selvan
πŸ‘οΈ 13 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
CSS outline-color Property

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

ValueDescription
named-colorA color keyword, such as blue, red, green, etc.
hexadecimal valueA hex code representing a color, such as #ff5733.
RGB valueAn RGB color value, such as rgb(255, 87, 51).
HSL valueAn HSL color value, such as hsl(9, 100%, 60%).
currentcolorThe 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
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-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
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-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.

πŸ‘¨β€πŸ’» 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