Everything we need to know about CSS Borders

This article was originally published on webinuse.com

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

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.

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.

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 to specify the value for border-radius.

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.

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.

Using shorthand property

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

    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.

    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, or you can read some of my other articles like JavaScript String replace method.