Custom borders
Last updated
Last updated
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.
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:
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:
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.
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).
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:
This usually looks a bit goofy:
hex codes
RGB or RGBA values
color names
hsl values
Lastly, you can also set rounded borders by using a property called border-radius using em/rem values, pixels, or percentages:
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
A specific border styles can be set per side by using property names that specify the top, bottom, left, or right border:
border colors can be set the same way as most colors in CSS, using:
