CSS border-inline-start-color Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-inline-start-color property in CSS allows you to set the color of the border on the inline start side of an element. The inline start side corresponds to the left side in left-to-right (LTR) writing modes and the right side in right-to-left (RTL) writing modes.

This property is part of the logical properties and values in CSS, which are designed to make it easier to handle layout changes when switching between different writing modes.

💡 Syntax

The syntax for the border-inline-start-color property is straightforward. You can specify any valid CSS color value.

Syntax

Copied

element {
  border-inline-start-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-inline-start-color property is the currentcolor, which inherits the value of the element's color property.

🏠 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 border color on the inline start side of a paragraph to green.

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 border-inline-start-color Example</title>
  <style>
    p {
      border-inline-start-width: 5px;
      border-inline-start-style: solid;
      border-inline-start-color: green;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Inline Start Border Color</h1>
  <p>This paragraph has a green border on the inline start side.</p>
</body>
</html>

🖥️ Browser Compatibility

The border-inline-start-color property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. As always, it's good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The border-inline-start-color property is a useful tool for web developers who need to apply custom border colors based on writing modes. By using logical properties like this one, you can create more flexible and adaptable designs that accommodate different languages and writing directions. Experiment with this property to see how it can enhance the layout and style of your web projects.