Custom borders

like you can frame a picture and hang it on your wall, you can add borders to your HTML elements that frame them visually.

In CSS, you can control a border's:

• width (thin, wide, 5px, etc.)

• style (solid, dashed, etc.)

• color (hex code, RGB value, etc.)

This results in a ton of border options that can spice up your elements.

You can also create borders around elements in either a shorthand or longhand way, depending on your preference.

Border syntax

Before we look at border value examples, there are two general ways to set borders:

• a longhand way where you list out each value in a different property (ex. border-width , border-style , and border-color ).

• a shorthand way where you combine all values into one property called border

Let's look at the shorthand way first. You can set borders in CSS using one simple property called border. In it, you will specify three border properties in the following order:

• width

• style

• color

Here are three quick examples of setting borders using the shorthand method:

h1 {
    border: 5px solid red;
}

h3 {
    border: 1em dashed #A4036F;
}

p {
    border: thick dotted rgb(22, 219, 147);
}

You can also set borders the longhand way by specifying all border values as different properties. Here are the same three examples from above, written out the longhand way:

h1 {
    border-width: 5px;
    border-style: solid; 
    border-color: red;
}

h3 {
    border-width: 1em;
    border-style: dashed; 
    border-color: #A4036F;
}

p {
    border-width: thick;
    border-style: dotted;
    border-color: rgb(22, 219, 147);
}

You'll often set borders the shorthand way because it's faster and more concise. In the below sections, though, we'll write each property out the longhand way for the sake of clarity.

Setting border width

Border widths can be set as either pixel values, em/rem values, or using a word that CSS has already pre-defined, like "thin," "medium," or "thick."

As you saw above, the width will be the first value in the shorthand way to specify borders. However, it can also be set on its own with the border-width property.

Borders can be set using pixels, but you could also use em/rem in order to keep the border width proportional to the text. If an element has a font-size of16px, setting a border width of 1em means the border will be 16px wide. If a user has their font preferences set to a higher size, though, and you set your border size in em/rem, your border will grow or shrink accordingly (which would not happen with a pixel value).

p { border-width: thin; }
p { border-width: medium; }
p { border-width: thick; }
p { border-width: 8px; }
p { border-width: 1.5em; }

Setting border style

In reality, you'll most often specify a "solid" border style. Depending on a certain style you're going for, though, you might choose a different border aesthetic. Here is the full list of possible options for setting borders in CSS:

• solid

• dashed

• dotted

• double

• groove

• hidden

• none

• ridge

• inset

• outset

The following image represents each border style, except "hidden." Based on the list above, guess which border style corresponds to each image below. Check the CSS code following the image to find out if you're right:

p {
    border-style: solid;
}

p {
    border-style: dashed;
}

p {
    border-style: dotted;
}

p {
    border-style: double;
}

p {
    border-style: groove;
}

p {
    border-style: none;
}

p {
    border-style: ridge;
}

p {
    border-style: inset;
}

p {
    border-style: outset;
}

👉 A specific border styles can be set per side by using property names that specify the top, bottom, left, or right border:

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

This usually looks a bit goofy:

👉 border colors can be set the same way as most colors in CSS, using:

• hex codes

• RGB or RGBA values

• color names

• hsl values

p {
    border-top-color: #16DB93;
    border-bottom-color: #A4036F;
    border-left-color: #EFEA5A;
    border-right-color: #FE5E41;
}

Setting border radius

Lastly, you can also set rounded borders by using a property called border-radius using em/rem values, pixels, or percentages:

p {
    border-radius: 5px;
}

• Each HTML element has a border.

• To set the width of a border, use border-width and define the size with pixels, em/rem, or special CSS words (thin, medium, thick).

• To set the style, use border-style and choose a style from the list of available CSS words.

• To set the color, use border-color and use either hex, RGB, or RGBA color codes.

• To set width, style, and color all at once, use the border property.

• To set individual borders, use top, right, left, and bottom (ex. border-top-style ).

• To curve the corners of a border, use border-radius