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.

HTML simple paragraph

Which looks like this on the browser:

c - wp_longest_content - longest_content -->
Paragraph 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.

"ezoic-pub-ad-placeholder-120" data-inserter-version="2">

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

data-inserter-version="2">
  • 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:

solid style

So the paragraph will have the following border:

Paragraph with solid style

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.

dashed style

So the paragaraph will be this time like this:

Paragraph with dashed style

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:

border width property

And the border becomes:

Paragraph with a border width of 4px

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:

Red border

The border of our paragraph will look like:

Paragraph with red border

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:

border property

The results will remain the same on the browser:

Paragraph with red border

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:

border radius property

So the border will be:

Paragraph with border-radius property

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.

Same radius value

And so the results will look like this:

Paragraph with border-radius of 20px

Below is the entire code:

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.

border-left-style property

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.

border-left 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.

3)- borders color

After adding a style and a width to the borders, we will add colors now.

This time we’ll pick the top and bottom sides. So let’s add colors to thse sides of the border.

The CSS properties we’ll use are border-top-color and border-bottom-color.

border-top and border-bottom color

We gave the top border a red color and the bottom border a blueviolet color.

On the browser we’ll have:

Paragraph with colored borders

Conclusion:

To sum up to add a border to an HTML element we use the folowing CSS properties:

border-style, border-width and border-color.

We can replace all these 3 properties with one property which is : border.

To make the corner of the border rounded we use the CSS property: border-radius.

To add different borders to the HTML element we use the left, right, top, bottom keywordes with the border property.

Get new content delivered directly to your inbox

Leave a Reply

%d bloggers like this: