CSS Border Shorthand
CSS
It is used to shorten the code for setting a border on an element.
CSS border shorthand
➔ The CSS border shorthand property is used to set a border on an element in a single statement or in a command.
➔ This shorthand property sets the width, style, and color of a border in a single declaration.
➔ To achieve the same result without the shorthand property, three separate properties must be set, and this produces longer code than the shortcut.
➔ For shorthand to work, you need to provide a border style in the syntax.
➔ Values other than border style are optional, if values are omitted then the default values medium for border width and element's current text color for border color will be used.
The border shorthand syntax
<style>
div {
border: 1px solid red;
}
</style>
The same border without shorthand syntax
<style>
div {
border-width: 1px;
border-style: solid;
border-color: red;
}
</style>
CSS border property
➔ The border property is a shorthand property and is used to set the following properties in order.
border-widthborder-styleborder-color
Example: The border shorthand.
Example
<!DOCTYPE html>
<html>
<head>
<meta content='charset=utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS border shorthand Example</title>
<style>
p {
margin: 50px;
}
div {
border: 1px solid red;
}
</style>
</head>
<body>
<h3>CSS border shorthand Example</h3>
<div>
<p>The CSS border shorthand property is used to set a border on an element in a single statement or in a
command.
</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Separate side shorthand.
➔ CSS also provides shorthand for a separate side border of an element.
border-top: 1px solid red;border-right: 1px solid red;border-bottom: 1px solid red;border-left: 1px solid red;
Syntax
border: border-width border-style border-color|initial|inherit;
Property values
| Common Value | Description |
|---|---|
| border-width | Specifies the width of the border. Default value is "medium" |
| border-style | Specifies the style of the border. Default value is "none" |
| border-color | Specifies the color of the border. Default value is the color of the text. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
.p1 {
border: 1px solid red;
}
.p2 {
border: 2px dashed black;
}
.p3 {
border: 3px double #64070e;
}Click on the "Try it Now" button to see how it works.