Tillitsdone
down Scroll to discover

CSS Border-Left-Color Customize Left Border

Learn how to use the CSS border-left-color property to customize the color of an element's left border.

Explore available options including named colors, hex values, and global values.
thumbnail

Introduction

The border-left-color CSS property lets you set the color of an element’s left border. This is useful for customizing the look of your web pages. By adjusting the left border color, you can make specific elements stand out, enhancing the overall design of your site.

Specification

The border-left-color property is defined in the CSS Backgrounds and Borders Module Level 3 specification. This specification provides guidelines on how to use border-related properties in CSS. For more details, check out the official CSS Backgrounds and Borders Module Level 3 specification here.

Syntax

The border-left-color property is simple to use. Here’s the syntax:

border-left-color: color;
  • color: This specifies the color of the left border. You can use named colors (e.g., red), hexadecimal values (e.g., #ffbb00), RGB values (e.g., rgb(255, 0, 0)), HSL values (e.g., hsl(100deg, 50%, 25%)), or the currentcolor keyword.

Additionally, you can use global values like inherit, initial, revert, revert-layer, and unset to control inheritance and default behavior.

Values

The border-left-color property accepts various values that define the color of the left border:

  • <color>: This value specifies the color of the left border and can be defined using different formats such as named colors (e.g., red), hexadecimal values (e.g., #ffbb00), RGB values (e.g., rgb(255, 0, 0)), HSL values (e.g., hsl(100deg, 50%, 25%)), currentcolor, or transparent.
  • Global values: These values control the inheritance and default behavior of the property, such as inherit, initial, revert, revert-layer, and unset.

Examples

Using Named Colors

border-left-color: red;

Using Hexadecimal Values

border-left-color: #ffbb00;

Using RGB Values

border-left-color: rgb(255, 0, 0);

Using HSL Values

border-left-color: hsl(100deg, 50%, 25%);

Using Currentcolor

border-left-color: currentcolor;

Using Transparent

border-left-color: transparent;

Using Global Values

border-left-color: inherit;
border-left-color: initial;
border-left-color: revert;
border-left-color: revert-layer;
border-left-color: unset;

Formal Definition

The border-left-color property in CSS sets the color of the left border of an element. Here are the key characteristics:

  • Initial value: The default value is currentcolor, which means the border color will be the same as the text color of the element.
  • Applies to: This property applies to all elements, including the ::first-letter pseudo-element.
  • Inherited: No, the border-left-color property is not inherited from the parent element.
  • Computed value: The computed value is a computed color.
  • Animation type: The border-left-color property can be animated as a color, allowing smooth transitions.

Formal Syntax

The formal syntax of the border-left-color property is straightforward:

border-left-color = <color>

Browser Compatibility

The border-left-color property is widely supported across all major web browsers. This ensures that your web designs will be consistent and functional regardless of the browser your users are using. Here is an overview of the browser compatibility:

BrowserVersionRelease Date
Chrome1.0Dec 2008
Firefox1.0Nov 2004
IE/Edge4.0Sep 1997
Opera3.5Nov 1998
Safari1.0Jun 2003

See Also

For further exploration and understanding of related CSS properties, you may find the following resources useful:

These resources provide additional information and examples that can help you master the use of border-related properties in CSS. By exploring these related properties, you can enhance your web development skills and create more sophisticated and visually appealing web designs.

icons/css-4.svg CSS Blogs
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
icons/logo-tid.svg

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?
Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!
🖐️ Contact us
Let's keep in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.