No, you cannot set them all in a single statement.
At the general case, you need at least three properties:
border-color: red green white blue;
border-style: solid dashed dotted solid;
border-width: 1px 2px 3px 4px;
However, that would be quite messy. It would be more readable and maintainable with four:
border-top: 1px solid #ff0;
border-right: 2px dashed #f0F;
border-bottom: 3px dotted #f00;
border-left: 5px solid #09f;
Top answer 1 of 5
224
No, you cannot set them all in a single statement.
At the general case, you need at least three properties:
border-color: red green white blue;
border-style: solid dashed dotted solid;
border-width: 1px 2px 3px 4px;
However, that would be quite messy. It would be more readable and maintainable with four:
border-top: 1px solid #ff0;
border-right: 2px dashed #f0F;
border-bottom: 3px dotted #f00;
border-left: 5px solid #09f;
2 of 5
31
Your case is an extreme one, but here is a solution for others that fits a more common scenario of wanting to style fewer than 4 borders exactly the same.
border: 1px dashed red; border-width: 1px 1px 0 1px;
that is a little shorter, and maybe easier to read than
border-top: 1px dashed red; border-right: 1px dashed red; border-left: 1px dashed red;
or
border-color: red; border-style: dashed; border-width: 1px 1px 0 1px;
W3Schools
w3schools.com › css › css_border_sides.asp
CSS Border Sides
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left): ... p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } ... We can also use the ...
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Shorthand_properties
Shorthand properties - CSS | MDN
Shorthands handling properties related to edges of a box, like border-style, margin or padding, always use a consistent 1-to-4-value syntax representing those edges: 1-value syntax: border-width: 1em — The single value represents all edges: 2-value syntax: border-width: 1em 2em — The first ...
W3Schools
w3schools.com › css › css_border_shorthand.asp
CSS Shorthand Border Property
CSS Reference CSS Selectors CSS Combinators CSS Pseudo-classes CSS Pseudo-elements CSS At-rules CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support ... Like you saw in the previous page, there are many properties to consider when dealing with borders. To shorten the code, it is also possible to specify all the individual border properties in one property. The border property is a shorthand property for the following individual border properties:
HTML Dog
htmldog.com › references › css › properties › border
CSS Property: border | HTML Dog
A shorthand property that combines border-top, border-right, border-bottom, and border-left, along with border-width, border-style, and border-color.
W3docs
w3docs.com › learn-css › border.html
CSS Border shorthand Property with syntax, values and examples
The border shorthand property is used when you want to make all four sides the same. You can change borders with the help of border-width, border-style, and border-color properties, which can set different values for each side.
Udacity
udacity.com › blog › 2021 › 03 › the-easy-guide-to-the-css-border-shorthand-property.html
The Easy Guide to the CSS Border Shorthand Property | Udacity
August 17, 2021 - This is accomplished by adding the direction you intend to manipulate into the border property declaration. ... The direction is prefixed with a hyphen. See the example code below for a direct demonstration of this.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › border-width
border-width - CSS | MDN
This property is a shorthand for the following CSS properties: ... /* Keyword values */ border-width: thin; border-width: medium; border-width: thick; /* <length> values */ border-width: 4px; border-width: 1.2rem; /* top and bottom | left and right */ border-width: 2px 1.5em; /* top | left and right | bottom */ border-width: 1px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1px 2em 0 4rem; /* Global values */ border-width: inherit; border-width: initial; border-width: revert; border-width: revert-layer; border-width: unset;
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Properties › border-style
border-style - CSS | MDN
This property is a shorthand for the following CSS properties: ... /* Keyword values */ border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; /* top and bottom | left and right ...
CSS-Tricks
css-tricks.com › how-do-you-put-a-border-on-three-sides-of-an-element
How Do You Put a Border on Three Sides of an Element? | CSS-Tricks
October 3, 2018 - .three-sides { border-color: black; border-style: solid; /* top, right, bottom, left - just like margin and padding */ border-width: 0 2px 2px 2px; }
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Properties › border
border - CSS | MDN
The border shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand border-width, border-style, and border-color properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start) border properties.
HTML Dog
htmldog.com › references › css › properties › border-width
CSS Property: border-width | HTML Dog
border-width is itself a shorthand property. Border width can be set on sides independently with border-top-width, border-right-width, border-bottom-width, and border-left-width.
Codecademy Forums
discuss.codecademy.com › frequently asked questions › css faq
Setting a border for one or two sides of the element - CSS FAQ - Codecademy Forums
July 8, 2018 - It is not really possible through the border property but we can use its derivatives: border-top border-right border-bottom border-left Each one of them follows the same value structure for border: width style color; So, to have a white top ...
HTML Dog
htmldog.com › guides › css › intermediate › shorthand
Shorthand Properties | HTML Dog
By stating just two values (such as padding: 1em 10em;), the first value will be the top and bottom and the second value will be the right and left. New Examples Section! See all of this code stuff in action, and play around with it. border-width can be used in the same way as margin and padding, ...
HTML Dog
htmldog.com › references › css › properties › border-top
CSS Property: border-top | HTML Dog
A shorthand property that combines border-top-width, border-top-style, and border-top-color. The top border, combined with right, bottom, and left border, can also be specified with the border shorthand property.
Tutorial Republic
tutorialrepublic.com › css-reference › css-border-style-property.php
CSS border-style Property - Tutorial Republic
This shorthand notation can take one, two, three, or four whitespace separated values. If one value is specified, it applies to all four border sides. If two values are specified, the first value applies to the top and bottom border, while the second value applies to the right and left sides border.
Vibes News
mariamalarab.com › blog › css-border-styles-top-bottom
CSS Border Styles: Top, Bottom, Left, And Right Explained
November 15, 2025 - In CSS, a border is a line that surrounds an HTML element. You can control the style, width, and color of this border. The border property is actually a shorthand property, meaning it allows you to set multiple border properties at once.
W3Schools
w3schools.com › css › css_border.asp
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element's border. I have borders on all sides. I have a red, bottom border. I have rounded borders. I have a blue, left border. The border-style property specifies what kind of border to display. ... The border-style property can have from one to four values (for the top border, right ...
HubSpot
blog.hubspot.com › website › css-shorthand
The Beginner’s Guide to CSS Shorthand
April 20, 2022 - You can also specify these three border properties for just one side of the element by using border-top, border-right, border-bottom, or border-left. Let’s look at the example below.
Programiz
programiz.com › css › border-shorthand
CSS border Property (With Examples)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>CSS border</title> </head> <body> <h1>CSS border Property</h1> </body> </html> h1 { /* border-width border-style border-color */ border: 4px solid blue; padding: 8px; } ... border-top: 4px solid blue; border-right: 4px solid blue; border-bottom: 4px solid blue; border-left: 4px solid orange;