# 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:
```css
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:
```css
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).
```css
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:
```css
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;
}
```
:point\_right: A specific border styles can be set per side by using property names that specify the top, bottom, left, or right border:
```css
p {
border-top-style: dotted;
border-bottom-style: dashed;
border-left-style: solid;
border-right-style: double;
}
```
This usually looks a bit goofy:
:point\_right: **border colors can be set** the same way as most colors in CSS, using:
* **hex codes**
* **RGB or RGBA values**
* **color names**
* **hsl values**
```css
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:
```css
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`