- Services
- Case Studies
- Technologies
- NextJs development
- Flutter development
- NodeJs development
- ReactJs development
- About
- Contact
- Tools
- Blogs
- FAQ
CSS Border-Left-Color Customize Left Border
Explore available options including named colors, hex values, and global values.
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:
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 thecurrentcolor
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
, ortransparent
.- Global values: These values control the inheritance and default behavior of the property, such as
inherit
,initial
,revert
,revert-layer
, andunset
.
Examples
Using Named Colors
Using Hexadecimal Values
Using RGB Values
Using HSL Values
Using Currentcolor
Using Transparent
Using Global Values
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:
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:
Browser | Version | Release Date |
---|---|---|
Chrome | 1.0 | Dec 2008 |
Firefox | 1.0 | Nov 2004 |
IE/Edge | 4.0 | Sep 1997 |
Opera | 3.5 | Nov 1998 |
Safari | 1.0 | Jun 2003 |
See Also
For further exploration and understanding of related CSS properties, you may find the following resources useful:
- Border-related CSS shorthand properties:
- Color-related CSS properties for other borders:
- Other border-related CSS properties applying to the same border:
- Default
currentcolor
color value:
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.
Talk with CEO
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.