RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/border-left below:

border-left · WebPlatform Docs

border-left Summary

Shorthand property that defines the border-width, border-style and border-color of an element’s left border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the left border — border-left-width, border-left-style and border-left-color.

Overview table

Initial value: For style values, the initial value is none. For color values, the initial value is currentColor. For width values, the initial value is medium, which is computed as about 3px in most browsers.
Applies to: All elements
Inherited: No
Media: visual
Computed value: [[Computed value::Depends of the value type, see #Computed value in #Notes for more details]]
Animatable: Yes
CSS Object Model Property: borderLeft
Percentages: N/A

Syntax

border-left: border-width border-style color
border-left: inherit

Values

border-width border-style color: The border-left property can contain up to three components:

border-width: This takes a numeric value with any of the standard length units.
border-style: This takes any of the range of style values available to the border-style property, which includes none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. For more details about each, see the border-style page.
color: This can take any valid CSS color as its value.

inherit: When we set the value to inherit, the element will inherit the border values set on its parent.

Examples

A simple example showing multiple <div>s, identical in style except that they have different border-left properties applied to them.

<div class="one"><p>One</p></div>
<div class="two"><p>Two</p></div>
<div class="three"><p>Three</p></div>
<div class="four"><p>Four</p></div>
<div class="five"><p>Five</p></div>

View live example



div {
  width: 150px;
  height: 50px;
  margin: 1rem;
  float: left;
}

p {
  padding: 0.25rem;
}

.one {
  
  border-left: 1px solid black;
}

.two {
  
  border-left: 4px dashed;
}

.three {
  
  border-left: dotted red;
}

.four {
  
  border-left: 10px black;
}

.five {
  
  border: 1px inset black;
  border-left: 10px inset rgba(234,190,50,0.75);
}

View live example

Usage

 * It is usual to use the border-left property to set the default state of a box's left border, and then override individual values using more specific properties, such as border-left-width or border-left-color.

border-left can be used as a divider between horizontally laid out items, such as horizontal navigation menu items, or table cells.

Notes Computed value

For style values, the computed value is as specified. For width values, the computed value is the absolute pixel value, or 0 if the value is set to none or hidden. For color values, the computed value is the equivalent RGB value, or the equivalent RGBA value for translucent colors.