Everything we need to know about CSS Borders
Tags: css, tutorial, beginners
Published: 2021-12-16 10:12:10

*This article was originally published on [webinuse.com](https://webinuse.com/everything-we-need-to-know-about-css-border/)*

The CSS border properties allow us to style element's border. We can set the width, style, radius, and color of element's border. We can style borders in three different ways.

1. Specifying CSS border properties individually
2. Specifying every border individually
3. Using shorthand property

### Specifying CSS border properties individually ###

There are four properties that we can use to style borders.

* `border-style` property that specifies the border type
* `border-color` is used to specify the color of the border(s)
* `border-width` specifies how wide/thick our border is
* `border-radius` property is used to specify the amount of radius of the border

#### Border style ####

`border-style` property is used to specify the type of the border we are going to use. There are several predefined values that we can use.

* `none` - without any type
* `solid` - solid border. Probably the most popular choice
* `dashed` - dashed border
* `dotted` - dotted border
* `double` - double border
* `groove` - 3D grooved border, works with `border-color` value
* `ridge` - 3D ridged border, works with `border-color` value
* `inset` - 3D inset border, works with `border-color` value
* `outset` - 3D outset border, works with `border-color` value
* `hidden` - hides border

{% codepen https://codepen.io/amersikira/pen/mdBWPvW %}

#### Border color ####

CSS border `border-color` property is used to specify the color of the border. It accepts any type of color value like HEX, HSL, RGB, RGBA, etc.

**NOTE** `border-color` property can be used, only, with other CSS border properties, not alone. If used alone, it does not work because it has no border to change color.

{% codepen https://codepen.io/amersikira/pen/PoJpzbR %}

#### Border width ####

`border-width` property can be used with custom size expressed in pixels, em, rem, vw, vh, almost anything except `%`, or we can use three of the predefined values: `thin`, `medium`, `thick`. If no width is specified, the default width of the border is `medium`.

**NOTE** `border-width` property must be used with `border-type` property, otherwise it does not work.

{% codepen https://codepen.io/amersikira/pen/oNGZLEw %}

#### Border radius ####

We all love those rounded corners, right? In order to make one we have to use `border-radius` property. This CSS border property allows us to specify the amount of "roundness" we want. We can use any [CSS unit](https://webinuse.com/css-units-guide-everything-you-need-to-know/) to specify the value for `border-radius`.

{% codepen https://codepen.io/amersikira/pen/zYEZZWp %}

### Specifying every border individually ###

We can specify every border individually, by refering directly to that exact border. There are four options: 

 * `border-top`
 * `border-right`
 * `border-bottom`
 * `border-left`

When using any of those options, we have to group values in single value, using space as delimiter. Order of the values is: `border-width`, `border-type`, `border-color`. We can specify every value except the one for radius. That is because, `border-radius` has its own way of specifying such things. Let's see an example.

{% codepen https://codepen.io/amersikira/pen/yLzMMQX %}

#### Specifying border radius for every border individually ####

To specify border radius for any border individually we have to use some/all of the following CSS border properties:

* `border-top-left-radius`
* `border-top-right-radius`
* `border-bottom-right-radius`
* `border-bottom-left-radius`

Now, we can specify border radius for any of those corners, using any of CSS Units.

{% codepen https://codepen.io/amersikira/pen/rNGyyEd %}

### Using shorthand property ###

We can leverage CSS' ability to declare multiple values, using single property.  

``` css
    border-width: 1px 2px 3px 4px;
    border-color: red blue green yellow;
    border-style: solid dashed dotted solid;
```

This gives us power to apply different styles to all/some borders in single line. The only rule that we have to follow is that values are ordered in following way: top, right, bottom, left. Meaning starting from top clock-wise.

If all four borders are the same, there is even shorter syntax.

``` css
    border: 1px solid red;
```

Same as we have mentioned above, there is strict order of the values. 1. is always `border-width`, 2. is always `border-style`, and 3. is always `border-color`. Order of the items must be respected.

If you have any questions or anything you can find me on my [Twitter](https://twitter.com/AmerSikira), or you can read some of my other articles like [JavaScript String replace method](https://webinuse.com/javascript-string-length/).