Css style

A Complete Guide to CSS Borders and Outlines

CSS borders and outlines are invaluable tools for web designers looking to add flair to a site. They’re easy to use once you know how they work and are versatile enough to meet a wide range of needs. Let’s take a look at CSS borders to see where to start.

What is the difference between a border and an outline in CSS?

CSS outlines and borders form two of the outer layers of the CSS box model, located between borders and margins. Although these properties are similar, they have different values ​​and purposes.

For one thing, CSS outlines lie outside the boundaries. This means that they can overlap content outside of the element you apply them to. Along with this, CSS borders change the dimensions of an element, but not the outlines.

If you have trouble viewing border and outline styles, you can use your browser’s developer tools to debug them.

CSS Border & Outline Shared Property Values

Despite their differences, CSS borders and outlines share some of their values. The shortcut you use for each is also very similar.

Abbreviated CSS border and outline

Like other complex CSS properties, borders and outlines have a shortcut available. These two properties share the same format for their shortcut options and it looks like this.

border: width style color;
outline: width style color;

This creates rules that look like this when in action. Of course, however, this shortcut does not cover all available values ​​for these properties.

border: 10px solid blue;
outline: 20px solid red;

These shortened CSS border and outline rules result in a thin blue border with a thick red outline.

Like other shorthand CSS properties, you can also use individual properties to achieve the same results.

CSS border width and outline width

Border and outline widths are optional CSS property values ​​that define the thickness of the borders and outlines you use. The format of these properties is the same.

outline-width: 20px;
border-width: 10px;

Borders allow you to define individual widths for each side of the element, but not outlines. You can read more about this in the following sections.

CSS border style and outline style

CSS borders and outlines come in a variety of styles. Solid borders are the most common, but you can get creative with how you use borders and outlines.

border-style: solid;
outline-style: dotted;

You can find a complete list of different CSS border and outline styles at the end of this article.

CSS border color and outline color

As with other color-based CSS properties, borders and outlines accept all legal CSS colors. This includes hex codes, RGB codes, abbreviated colors, etc.

border-color: blue;

You can also use color gradients when working with CSS borders and outlines.

CSS Border property values

Besides their shared property values, borders and strokes also have unique values ​​to explore. CSS borders have two unique properties worth learning about.

CSS border radius

Adding a radius to an element’s border gives you a lot of control over its shape. Each corner of an element can have a different radius, and this property can be set even when border-style is set to none.

border-radius: 20px;

You can set a single value to change the radius of all corners.

You can also divide the corners into top left/bottom right and top right/bottom left groups.

border-radius: 10px 20px;

This makes it easy to create interesting shapes with your HTML elements.

Finally, you can set each corner to have its own radius.

border-radius: 10px 20px 30px 40px;

These values ​​apply clockwise from the top left corner.

CSS Border Side Properties

Unlike outlines, you can set each side of a border to have a unique value for many of its properties. This allows you to give each side of your element a different width.

border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;

You can also set independent CSS border styles for each side of an element.

border-left-style: solid;
border-right-style: dotted;
border-top-style: dashed;
border-bottom-style: double;

And you can change the color on each side if you want.

border-left-style: blue;
border-bottom-style: rgb(0, 0, 255);

CSS borders work with the usual shortcut to combine like this.

border-left: 10px solid blue;
border-right: 20px dotted
border-top: 30px dashed
border-bottom: 40px double rgb(0, 0, 255);

CSS Outline property values

Like CSS borders, outlines have a unique property of their own; outline offset.

Offset CSS outline

Adding an offset to an outline creates space between itself and the main element. This offset must be the same for each side of the outline and the property accepts only one value.

outline-offset: 10px;

This can be a handy way to use a third border for your elements that matches your background color.

CSS border and outline styles

Borders and outlines need styling to work. There are ten styles to choose from, including borders that don’t show at all.

border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: groove;
border-style: ridge;
border-style: double;
border-style: inset;
border-style: outset;
border-style: hidden;
border-style: none;

Borders share the same styles with outlines, only with the outline style set as a property.

How to use CSS borders and outlines

Outlines and borders are great design tools for website builders. You can set the look of your website with these CSS properties, but you’ll have to get creative.