RetroSearch Browse

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

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

border · WebPlatform Docs

border Summary

Shorthand property that defines the different properties of all four sides of an element’s border in a single declaration. It can be used to set border-width, border-style and border-color, or a subset of these.

Overview table

Initial value: medium none currentColor
Applies to: All elements
Inherited: No
Media: visual
Computed value: concatenation of border-width, border-style, and border-color.
Animatable: Yes
CSS Object Model Property: border
Percentages: N/A

Syntax

border: <border-width> OR <border-style> OR <border-color>
border: inherit

Values

inherit: When the value is set to inherit, the element will inherit the border values set on its parent.
<border-width> OR <border-style> OR <border-color>: A concatenation of <border-width>, <border-style>, and <border-color>. At least one of these must be present, and they may appear in any order.

<border-width>: A numeric value with any of the standard length units. The initial value is medium, which most browsers will render as 3px. See the border-width property.

<border-style>: This takes any of the range of values available to the border-style property. The initial value is none.

<border-color>: This takes any valid CSS color. See the border-color property. The initial value is currentColor.

Examples

A simple example showing multiple <div>s, identical in style except that they have different border 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: 150px;
  margin: 1rem;
  float: left;
}

p {
  padding: 2rem;
}

.one {
  
  border: 1px solid black;
}

.two {
  
  border: 4px dashed;
}

.three {
  
  border: dotted red;
}

.four {
  
  border: 10px black;
}

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

View live example

Usage

 * It is usual to first use the border shorthand property to set the state of a default box, and then override it where needed, using the more specific shorthand properties border-width, border-style, and border-color. Each of these properties may take up to four values, respective to the sides of the box.

It is also common to override the border property with the properties specific to each individual side: border-top, border-right, border-bottom, and border-left. Each of these properties may take up to three values, defining the appearance (width, style, and color) of the designated side.
The following twelve “longhand” properties can be used to define the entire border of an object:

border-top-width, border-top-style, border-top-color, border-right-width, border-right-style, border-right-color, border-bottom-width, border-bottom-style, border-bottom-color, border-left-width, border-left-style, border-left-color.

Notes

The initial value of border is the concatenated result of the initial values of each component.
A border-bottom can be used as a divider between vertically laid out items, such as navigation menu items, or a new section. Authors will sometimes use this technique rather than inserting an <hr/> element in the HTML.
Another common technique is to use border-bottom properties for link underlining rather than text-decoration: underline, as it affords the designer more control.

Related specifications

CSS Level 3: Candidate Recommendation
CSS Level 2 (Revision 1): Recommendation
CSS Level 1: Recommendation