How to make a border in CSS. Awesome lesson in 2021

In this article we will consider how to make a border in CSS.

By default, most HTML elements don’t have a border, but CSS gives you plenty of options to define one, with a range of border-related properties. In fact, the border can be adjusted using so many properties that it sometimes gets a bit confusing. However, at its most basic level, you will usually want to control the border color, width, and style, so let’s look at an example of just that:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border-color: CornflowerBlue;
	border-width: 2px;
	border-style: solid;
}
</style>

<div class="box">
	Hello, world!
</div>
How to make a border in CSS
How to make a border in CSS

So, how to make a border in CSS?

This is pretty much as basic as it gets – by using the border-styleborder-color and border-width properties, we can easily give an element the border we want. Now let’s talk about these three properties.

Border color

Just a plain old color property, where you can define the color for the border in several different ways, as it is with all color related properties in CSS. Look elsewhere in this tutorial for a complete walkthrough of all the options you have when defining a color in CSS.

Border width

Works much like margins and paddings – can be either an absolute value, like in this example, a relative value, or one of the pre-defined border width values: Thin, medium or thick. If you use the pre-defined values, it’s up to the browser to interpret them, which basically gives you less control of how your work will look across all the different devices and browsers.

Border style

For the style of the border, you have a range of options. The most commonly used is probably the solid border, but there are many more to choose from:

  • hidden,
  • dotted,
  • dashed,
  • solid,
  • double,
  • groove,
  • ridge,
  • inset
  • and outset.

Wanna know how they all look? Try out this example:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border-color: CornflowerBlue;
	border-width: 4px;
	margin: 10px;
	float: left;
}
</style>

<div class="box" style="border-style: dashed;">Dashed</div>
<div class="box" style="border-style: dotted;">Dotted</div>
<div class="box" style="border-style: double;">Double</div>
<div class="box" style="border-style: groove;">Groove</div>
<div class="box" style="border-style: inset;">Inset</div>
<div class="box" style="border-style: outset;">Outset</div>
<div class="box" style="border-style: ridge;">Ridge</div>
<div class="box" style="border-style: solid;">Solid</div>

Example this

Shorthands

We talked about shorthand properties earlier – properties which allow you to define values for multiple properties at the same time. In the first example, we actually used shorthand properties to define the same color, width, and style for borders of all four sides of an element. For instance, border-style actually maps to

  • border-top-style,
  • border-right-style,
  • border-bottom-style
  • and border-left-style

And the same goes for border-width and border-color.

This also means that border-style, border-color and border-width can all take from one to four values, allowing you to use different styles, colors and widths for all four sides of the element. Here’s an example:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border-style: solid dashed ridge dotted;
	border-color: CornflowerBlue Chartreuse CadetBlue Chocolate;
	border-width: 1px 2px 3px 4px;
}
</style>

<div class="box">
	Hello, world!
</div>
How to make a border in CSS
How to make a border in CSS

Now the final result is a pretty odd-looking box, but hopefully, you can see how it works. Just like with margins, you can specify one or several values, which will be applied from the top and clockwise around the element (top, right, bottom, left).

Without these shorthands, you would have to use 12 properties to achieve the same result, but it can get even shorter: Using the border property, you can shorten it even more. Here is our very first example, re-written to use the border property:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border: 2px solid red;
}
</style>

<div class="box">
	Hello, world!
</div>

We just saved a couple of properties more! When using the border property, the correct order is width, style, and color and while the browser may be able to understand it even if you don’t get the order right, it’s recommended to always use this specific order when using the border property. Notice that you ARE allowed to skip one or two values – in that case, the browser will try to understand which of them you skipped and assign the default values for the missing ones. So, how to make a border in CSS?

Border radius

As an addition to CSS 3, the ability to define border radius was added, effectively giving developers the possibility to make rounded corners on their elements. For new developers, this might seem trivial, but before this was added, the desire for rounded corners generated hundreds of how-to articles!

Fortunately, that was in the past and thanks to the border-radius property, it’s now as easy as pie to get rounded corners:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border: 3px solid CornflowerBlue;
	border-radius: 5px;
}
</style>

<div class="box">
	Hello, world!
</div>

Example this

The only disadvantage is the lack of support for this in Internet Explorer 8 and versions below it, but they will simply fall back to regular corners. So, how to make a border in CSS? As you may have guessed by now, border-radius is a shorthand property, short for:

  • border-top-left-radius,
  • border-top-right-radius,
  • border-bottom-right-radius
  • and border-bottom-left-radius.

You can set these individually, or use one or several values for the border-radius property to have different values for the four corners of an element.

The border-radius property takes absolute and relative values, just like most other CSS length units, and in the next example, I’ll use that to create corners so rounded that the usual squared box actually becomes a circle:

<style type="text/css">
.circle {
	width: 100px;
	height: 100px;
	background-color: CornflowerBlue;
	border-radius: 50%;
}
</style>

<div class="circle"></div>
How to make a border in CSS
How to make a border in CSS

Pretty cool, right?

Summary

Borders are a great tool when designing your webpages and as you can see from the above examples, they are both flexible and easy to use. The amount of shorthand properties can make things a bit confusing, but after a while, you will get the hang of it.

Leave a Reply