Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Topics

CSS border-color Property

Posted in CSS Tutorial
Updated on Sep 04, 2024
By Mari Selvan
πŸ‘οΈ 48 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
CSS border-color Property

Photo Credit to CodeToFun

πŸ™‹ Introduction

The border-color property in CSS is used to set the color of the borders around an element.

This property allows you to specify different colors for each border or apply a uniform color across all borders.

By customizing the border color, you can enhance the visual appeal of your website and ensure that elements stand out or blend seamlessly with your design.

πŸ’‘ Syntax

The border-color property can be applied to any element with borders. The syntax allows you to set individual colors for each border or a single color for all borders.

Syntax
Copied
Copy To Clipboard
element {
  border-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 border-color property is initial, which means the color of the border will be inherited from the element's parent or set to the default color of the browser.

🏠 Property Values

ValueDescription
named-colorA color keyword, such as red, blue, 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.
transparentThe border will be invisible.

You can also specify colors for individual borders using the following syntax:

Syntax
Copied
Copy To Clipboard
element {
  border-color: top-color right-color bottom-color left-color;
}

πŸ“„ Example

In this example, we'll set a uniform border color of red for all sides of a div element.

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 border-color Example</title>
  <style>
    .box {
      border: 2px solid red;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Box with Red Border Color</h1>
  <div class="box">
    This box has a red border.
  </div>
</body>
</html>

Different Colors for Each Border

In this example, we'll set different colors for each border of a div element.

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 border-color Example</title>
  <style>
    .box {
      border-width: 2px;
      border-style: solid;
      border-color: red green blue yellow;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Box with Different Border Colors</h1>
  <div class="box">
    This box has different colors for each border.
  </div>
</body>
</html>

πŸ–₯️ Browser Compatibility

The border-color property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It’s a well-established property and should work consistently across different environments.

πŸŽ‰ Conclusion

The border-color property is a versatile tool in CSS for customizing the appearance of borders around elements. By setting specific colors for borders, you can create visually distinct elements, enhance your website’s design, and ensure that borders match your overall theme. Experiment with different colors and combinations to achieve the desired effect for your web projects.

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