CSS: border-left property
This CSS tutorial explains how to use the CSS property called border-left with syntax and examples.
Description
The CSS border-left property defines the width, line style, and color of the left border of a box. It is a shorthand property for setting the border-left-width, border-left-style, and border-left-color CSS properties.
Syntax
The syntax for the border-left CSS property is:
border-left: border-left-width border-left-style border-left-color;Parameters or Arguments
border-left-width is the left border width of a box and can be one of the following:
(If border-left-width is not provided, the default is medium)
| Value | Description |
|---|---|
| fixed | Fixed value expressed in px, em, ... div { border-left: 2px; } |
| thin | Thin border-left width, which might be 1px or 2px depending on the browser div { border-left: thin; } |
| medium | Medium border-left width, which might be 3px or 4px depending on the browser div { border-left: medium; } |
| thick | Thick border-left width, which might be 5px or 6px depending on the browser div { border-left: thick; } |
border-left-style is the line style of the left border of a box and can be one of the following:
(If border-left-style is not provided, the default is none)
| Value | Description |
|---|---|
| none | No border-left (This is the default) div { border-left: none; } |
| solid | Single, straight, solid line div { border-left: solid; } |
| dotted | Series of dots div { border-left: dotted; } |
| dashed | Series of short dashes div { border-left: dashed; } |
| double | Two straight lines that total the pixel amount defined by border-left-width div { border-left: double; } |
| groove | Carved effect div { border-left: groove; } |
| ridge | 3D appearance where border-left looks like it is "coming out" (opposite of groove) div { border-left: ridge; } |
| inset | Embedded appearance div { border-left: inset; } |
| outset | Embossed appearance (opposite of inset) div { border-left: outset; } |
| hidden | Border is hidden div { border-left: hidden; } |
| inherit | Element will inherit the border-left-style from its parent element div { border-left: inherit; } |
border-left-color is the color of the left border of a box and can be one of the following:
| Value | Description |
|---|---|
| #RRGGBB | Hexadecimal representation of the border-left-color div { border-left: #FF0000; } |
| rgb() | RGB representation of the border-left-color div { border-left: rgb(255,0,0); } |
| name | Name of the border-left-color (ie: red, blue, black, white) div { border-left: red; } |
| transparent | Border is not displayed but still takes up space on the page div { border-left: transparent; } |
| inherit | Element will inherit the border-left-color from its parent element div { border-left: inherit; } |
Note
- When using the border-left property, you can provide one or all of the values (border-left-width, border-left-style, and border-left-width values) and they can be provided in any order.
- You must provide a value for the border-left-style for the left border to appear.
- See also the border-left-color, border-left-style, and border-left-width properties.
- Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.
Browser Compatibility
The CSS border-left 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 property below, exploring examples of how to use this property in CSS.
For example:
div { border-left: solid; }In this CSS border-left example, we have set the line style of the left border of the <div> tag to solid. You must set the style or the left border will not appear.
Next, we'll look at a CSS border-left example where we provide the border-left-width, border-left-style, and border-left-color values.
div { border-left: 3px solid red; }In this CSS border-left example, we have set the border-left-width to 3px, the border-left-style to solid, and the border-left-color to red.
We could rewrite this example using the hexadecimal value for red as follows:
div { border-left: 3px solid #FF0000; }Or we could rewrite this example using the rgb() value for red as follows:
div { border-left: 3px solid rgb(255,0,0); }
Advertisements