The Complete Guide to CSS Borders and Outlines

CSS borders and outlines are valuable tools for web designers who want to add flair to their sites. Once you understand how it works, it is easy to use and 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 CSS borders and outlines?

CSS outlines and borders form the outer two layers of the CSS box model and sit between borders and margins. These properties are similar but have different values ​​and purposes.

One is that the CSS outline is outside the border. This means they may overlap content outside the element to which they apply. Along with this, CSS borders change the dimensions of the element, but not the outline.

If you have difficulty visualizing border and outline styles, you can use your browser’s dev tools to debug them.

Shared property values ​​for CSS borders and outlines

Despite their differences, CSS borders and outlines share some of their values. The abbreviations used for each are also very similar.

CSS Border & Outline Shorthand

As with other complex CSS properties, both borders and outlines can be abbreviated. Both of these properties share the same form of shorthand options, which looks like this:

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

This will create a rule that looks like this at runtime. Of course, this shorthand doesn’t cover all possible values ​​for these properties.

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

These CSS border and outline shorthand rules create a light blue border and a thick red outline.

You can use individual properties to achieve the same result as you would any other convenience CSS property.

CSS Border Width & Outline Width

Border and outline width is an optional CSS property value that sets the thickness of the border and outline to use. These properties have the same format.

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

Borders allow you to set individual widths for each side of the element, while outlines do not. More on this in the next section.

CSS border style & 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; 

There is a complete list of various CSS border and outline styles at the end of this article.

CSS border color & outline color

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

 border-color: blue;
outline-color:  

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

CSS border property value

In addition to shared property values, borders and outlines also have unique values ​​to investigate. CSS borders have two unique properties worth learning.

CSS border radius

Adding a radius to an element’s border gives you finer control over its shape. Each corner of an element can have a different radius. This property can be set even if 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 split 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 using HTML elements.

Finally, each corner can have its own radius.

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

These values ​​are applied clockwise from the top left corner.

CSS border-side properties

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

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

You can also set individual CSS border styles for each side of the element.

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

You can also change the color of each face if you want.

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

CSS border edges combine like this in conjunction with the usual shorthand.

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

CSS outline property value

Like CSS borders, outlines have their own unique properties. Outline offset.

CSS outline offset

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 only accepts one value.

 outline-offset: 10px; 

This is a good way to take advantage of the element’s third border that matches the background color.

CSS border & outline styles

Both borders and outlines need styles to work. There are 10 available styles to choose from, including a border that is not displayed 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; 

The border shares the same style as the outline, but only if the outline-style is set as a property.

How to use CSS borders and outlines

Outlines and borders are great design tools for website authors. You can use these CSS properties to define the look and feel of your website, but it’s tricky.