CSS Border & Outline

An outline is a line wrapping up an element outside its borders. Its goal is to make the element prominent and capture users' attention. Unlike borders, the outline can take any size you want.

In CSS, we use the outline property and other various properties to adjust its style (e.g., dotted or solid), color, width, and offset. Outlines don't take up space — they go on the top of the container, overlapping with margin and nearby elements.

Don't confuse the element's outline and border! The border's goal boils down to specifying the element's existence and marking up its container dimensions.

For setting up borders, web developers use the border property, allowing them to modify each edge differently — different width, color, or style. An outline is the same on all sides. Also, borders can change the element's size or width, overlapping with the element's parts.

The outline is a shorthand property that exists to make it easier for web developers to write down the outline's style rules in one declaration. The property includes the following CSS constituents:

• Outline-width
• Outline-color
• Outline-style

The outline-width property defines the thickness of a line surrounding the element that can be thin, medium, and thick.

Unlike the outline property, all four sides of a border can be of a different value for a style: dotted, dashed, solid, double, etc. To set an element's border or outline style, you should either use a shorthand border or outline property or specify the style using individual property — border-style or outline-style.

Make a note that the border-style property is a shorthand for the following properties:

• border-bottom-style

• border-left-style

• border-right-style

• border-top-style

You can specify a style for each side individually or list them all inside the border-style property in a clockwise order starting from the top.

In contrast to the outline, the element's borders can each be of different widths. The border width can take a predefined value — thin, medium, or thick — or a more specific one using pixels (px), points (pt), centimeters (cm), or ems, like in the example.

You can specify the property in 3 ways:

• Using the border shorthand property and setting the same width for all sides
• Using the border-width shorthand property and setting the same or various widths for each side
• Using individual properties for each side (border-bottom-width, border-left-width, border-right-width, and border-top-width)

For modifying the outline color, web developers can use the shorthand outline property, which lists all outline values (weight, style, and color) separated by gaps or choose the more specific outline-color property.

Since border sides can all be different, you can use the border-color property and, in clockwise order, specify the color for each side.

What value can the color property take?

• Color name, e.g., yellow
• HEX code, e.g. #FDC500
• RGB code, e.g. rgb(253,197,0)
• HSL - specify a HSL value, like hsl(47, 100%, 50%)
• Transparent

Rounded borders are pretty common for UI elements, like buttons or cards. They're visually more appealing than sharp-cornered borders and more convenient for users' eyes.

The border-radius property allows web developers to set either the same roundness for all corners with one value or different values for each corner in a clockwise order (starting from the left top), e.g. border-radius: 5px 20px 2px 10px;

The outline-offset property is responsible for adding space between an outline and the border of an element. It's always transparent, and the only thing that you can regulate is the distance in pixels, points, centimeters, ems, or percents.

The offset can take a negative value and place the outline inside the element. In turn, a value of 0 sets the outline over the border so that there is no space between them.

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;

}

The correct answer for the border property is the dashed value. Other types of border style include dotted, solid, double, groove, ridge, etc. If you decide to make each side of a different style, you should use the border-style shorthand property and specify each value in a clockwise order starting from the top, e.g.: border-style: dotted dashed solid double;

The border-left, border-right, border-top, and border-bottom properties are shorthand properties for border-width and border-style when you need to specify values only for one side. The CSS is quite flexible and eases the pain by providing different shorthand properties like that from the example.

The border-radius is an inclusive property for borders. Outlines can't be rounded. You can specify the value in pixels, like in the example, or use other units of measurement, like points (pt), ems, centimeters (cm), or percents (%).