CSS border-How to add a border and make it rounded?

What is a border?

A border is a set of lines that surrounds an element. We can see that a lot with images. Images often have a border, either a rectangular border or a circular border.

How can we add borders and style them?

To add a border to an element in CSS all you have to do is to use the border property.

Let’s say that we have a paragraph in HTML.

Which looks like this on the browser:

Now we want to add a border to our paragraph. To do that we have to define first the style of the border.

There are many styles that we can choose from. Below a list of some styles:

solid
inset
outset
dashed
dotted
ridge

In this example we will choose solid style. The CSS property we’re going to use is border-style.

The code for this is:

So the paragraph will have the following border:

Now let’s say that we want to choose dashed style. All we have to do is to give the border-style property the dashed value.

So the paragaraph will be this time like this:

Now let’s go back to the solid style and let’s see how we can change the width of the border.

To change the width of our border we will use border-width property. Let’s give it 4px as width.

So the code is:

And the border becomes:

Now it’s time to change the color of the border. To change the color of the border we use border-color property.

Let’s say that we want the color of our border to be red.

The code is:

The border of our paragraph will look like:

So far we have seen 3 properties: border-style, border-width and border-color.

These 3 properties can be combined and used into one property which is border.

Indeed, we can use just the border property to define at the same time the width, the color and the style of the border.

In this case the code goes like this:

The results will remain the same on the browser:

How can we make the corner of the border rounded?

To make the corners of the border rounded we use border-radius property.

The border-radius property takes 4 values: a value for the top left corner, a value for the top right corner, a value for the bottom right corner and a value for the bottom left corner.

Let’s make the border that we’ve just added round.

The code for that is:

So the border will be:

So as you can see, the more the value of the radius is big (like the one of the bottom right corner 60px) the more the corner of the border is rounded.

If you want to give the same value to all border’s corners, let’s say for example that you want all corners to be 20px rounded, then the code will be : border-radius: 20px 20px 20px 20px.

As this is a long version, you can use the short version where you specify the value once.

And so the results will look like this:

Below is the entire code:

How to add a border to only one side of the element?

1)- borders style

If we want to add a border to only one side of the HTML element, let’s say we want to add a border to the left side of our paragraph, the CSS property we’ll use is: border-left-style.

So the paragraph will be:

Paragraph with border-left-style property

Let’s say that we want to add a dashed style to the top of the paragraph’s border, and a dotted style to the right, and an inset style at the bottom.

the properties we’ll use are:

border left,right,top, bottom properties

On the browser we’ll have:

Paragraph borders with 4 different styles on each side

2)- borders width

Now that we have added different style borders to each side separately, we can also add a width.

Let’s say we want to add a width to the left side and the right side only. The properties we’ll use are border-left-width and border-right-width.

Our paragraph borders will be:

Paragraph with border-left and border-right width

As you have probably noticed, the width of the left and right borders has changed.

Of course if you want you can go a step further and change also the width of the top and bottom by using border-top-width and border-bottom-width properties.