CSS: border-left-width property
This CSS tutorial explains how to use the CSS property called border-left-width with syntax and examples.
Description
The CSS border-left-width property defines the width of the left border of a box.
Syntax
The syntax for the border-left-width CSS property is:
border-left-width: value;
Parameters or Arguments
- value
The width of the left border of a box. It can be one of the following:
Value Description fixed Fixed value expressed in px, em, ...
div { border-left-width: 2px; }thin Thin border width, which might be 1px or 2px depending on the browser
div { border-left-width: thin; }medium Medium border width, which might be 3px or 4px depending on the browser
div { border-left-width: medium; }thick Thick border width, which might be 5px or 6px depending on the browser
div { border-left-width: thick; }
Note
- Be sure to set the border-left-style property as well to make sure that your left border appears.
- See also the border-left-color, border-left-style, and border-left properties.
Browser Compatibility
The CSS border-left-width property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the border-left-width property below, exploring examples of how to use this property in CSS.
Let's look at an example where we set the left border to a fixed width.
div { border-left-width: 0.25em; border-left-style: solid; }
In this CSS border-left-style example, we have set the width of the left border to 0.25em. Be sure to apply a border-left-style so that the border appears.
Next, let's try using one of the width keywords (thin, medium, thick) to set our left border width.
div { border-left-width: thin; border-left-style: solid; }
In this border-left-style example, we have set the left border to a thin line.
Advertisements