CSS borders and outlines are valuable tools for web designers looking to add flair to a site. They are easy to use once you know how they work and are versatile enough to meet a wide range of needs. Let's look at CSS borders to see where you should get started.
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, sitting between borders and margins. While these properties are similar, they have different values and purposes.
For one, CSS outlines sit outside of borders. This means that they can overlap with content outside the element you apply them to. Along with this, CSS borders change the dimensions of an element but outlines do not.
If you have difficulty visualizing border and outline styles, you can use your browser’s development tools to debug them.
CSS Border & Outline Shared Property Values
Despite their differences, CSS borders and outlines share some of their values. The shorthand you use for each is also very similar.
CSS Border & Outline Shorthand
Like other complex CSS properties, both borders and outlines have shorthand available. Both of these properties share the same format for their shorthand options and it looks like this.
border: width style color;outline: width style color;
This creates rules that look like this when they are in action. Of course, though, this shorthand doesn't cover all the values available for these properties.
border: 10px solid blue;outline: 20px solid red;
These shorthand 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 & outline-width
Border and outline widths are optional CSS property values that set the thickness of the borders and outlines you use. The format for these properties is the same.
outline-width: 20px;border-width: 10px;
Borders allow individual widths to be set for each side of the element, but outlines do not. You can read more about this in the following sections.
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 the way that you use borders and outlines.
border-style: solid;outline-style: dotted;
You can find a full list of the different CSS border and outline styles at the end of this article.
CSS border-color & outline-color
Like with other color-based CSS properties, borders and outlines accept all CSS legal colors. This includes hex codes, RGB codes, shorthand colors, and more.
border-color: blue;outline-color: #ff0000;
You can also use color gradients when working with CSS borders and outlines.
CSS Border Property Values
Along with their shared property values, borders and outlines also have unique values to explore. CSS borders have two unique properties that are worth learning.
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 split the corners into groups of top left/bottom right and top right/bottom left.
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 starting 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 makes it possible 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 of each side if you want to.
border-left-style: blue;
border-right-style: #ff0000;
border-top-style: #00ff00;
border-bottom-style: rgb(0, 0, 255); CSS border sides work with the regular shorthand to combine like this.
border-left: 10px solid blue;
border-right: 20px dotted #00ff00;
border-top: 30px dashed #ff0000;
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.
CSS outline-offset
Adding an offset to an outline creates a 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 can be a neat way to make use of a third border for your elements that matches your background color.
CSS Border & Outline Styles
Both borders and outlines need a style to work. There are ten available styles to choose from, including borders that don't show up 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 outline-style set as the property.
How to Use CSS Borders & Outlines
Outlines and borders are great design tools for website creators. You can define the look and feel of your website with these CSS properties, but you'll need to get creative.
ncG1vNJzZmivp6x7rq3KnqysnZ%2Bbe6S7zGiarKtdl7yzsMSrqmanpam5qrrErGScp52luabAxGaerqGUmnw%3D