<?xml version="1.0" encoding="utf-8"?>

CSS shorthand border and outline properties

CSS shorthand border and outline properties Bad Practice
CSS shorthand border and outline properties Best Practice

Shorthand properties like border and outline simplify your actions and shorten the code. With one declaration, you can specify all style rules like width, style, and color. The order of the values does not matter, but what matters is the style property. If it's not specified, other styling rules won't work.

In addition to that, if you want to style only one border side, you can use border-left, border-right, border-top, or border-bottom properties. With one declaration, you can specify weight, style, and color just for one side, e.g.:

{

border-top: 5px solid black;

}

Improve your UX & Product skills with interactive courses that actually work