You can put a border around any object in your HTML. We often use borders around buttons, but you could put a border around a paragraph to make it stand out, for instance if you want to offset a quote in the middle of a page.

To use a border, you select what you want to put it around. The border goes outside of any padding you have added. The property name is border. It takes three values. You list the font size, how thick it’s going to be; the type of line, be it solid or dashed or something else; and you list the color of the line.

It looks like this:

border: 1px solid #000

That would draw a thin solid black line around the HTML element.

Border-radius gives the corners a rounded edge. The higher the number, the rounder the edge.

It looks like this:

border-radius: 2px;

That would just take the edge off the point in each corner of your box.

I added one more thing to the video lesson. Transition-duration tells how long to take making a transition. We list it in the place with the starting values. What is it changing to? You can list that as :hover. Did you ever hover over a link and it changed color? It’s a cue to let you know it’s clickable.

Below I have an example that changes two attributes of the links when you hover over them, when you place your mouse on them. The background color changes and the border color changes. The transition duration makes it a smooth transition instead of being abrupt. I set it to take .3 seconds. You can change any property’s attribute. Some work better than others. When you are changing spacing, it can cause jumps that aren’t so pretty.

a {
background-color: #3a4660;
color: #c9af98;
text-decoration: none;
padding: 20px;
border: 5px outset #845007;
border-radius: 5px;
transition-duration: .3s;
}

a:hover {
background-color: #845007;
border: 5px outset #3a4660;
}

You can watch the video of this lesson to see how this works.