Borders in css

In this aticle we are going to learn about borders in css, how to give our elements lines around them with solid, dotted, dashed and double borders and giving the border a specific color and radii.

We learnt about css in general learning what css can do in web pages, colors in css and background colors in css so, now we are going to learn about borders to give our elements a nice look.

Borders

We use borders in Cascading Style Sheets to give elements lines and decorate our elements by changing border color.

Solid border

Let us see how we can give elements specific border on the web page. So, we are going to give div element solid border, copy and paste below code.

<div style="border: 1px solid red;">This is a div element with red solid border.</div>

So, we should have the following results.

This is a div element with red solid border.

Now we have div that have a red solid line around it and this is a solid border.

Dotted border

Dotted border is a dotted line around the element. So, let us create a dotted border, copy and paste below code.

<div style="border: 1px dotted red;">This is a div element with red dotted border.</div>

So, we should have the following results.

This is a div element with red dotted border.

Dashed border

Dashed border is a dashed line around the element. So, let us create a dashed border, copy and paste below code.

<div style="border: 1px dashed red;">This is a div element with red dashed border.</div>

So, we should have the following results.

This is a div element with red dashed border.

Double border

Double border is double lines around the element. So, let us create a double border, copy and paste below code.

<div style="border: double red;">This is a div element with red double border.</div>

So, we should have the following results.

This is a div element with red double border.

Border radius

We can give elements borders with specified radius, copy and paste below code.

<div style="border: 1px solid red; border-radius: 10px";>This is a div element with red solid border with 10px radius.</div>

So, we should have the following results.

This is a div element with red solid border with 10px radius.

We can also give elements borders with specified radius at a specific corner. Let us create element with border radius on the top right corner of it, copy and paste below code.

<div style="border: 1px solid red; border-top-right-radius: 10px;">This is a div element with red solid border with 10px top right radius.</div>

So, we should have the following results.

This is a div element with red solid border with 10px top right radius.

Let us create element with border radius on the bottom left corner of it, copy and paste below code.

<div style="border: 1px solid red; border-bottom-left-radius: 10px;">This is a div element with red solid border with 10px bottom left radius.</div>

So, we should have the following results.

This is a div element with red solid border with 10px bottom left radius.

Let us sum up our lesson, copy and paste below code.

<div style="border-left: 1px solid red; border-top: 1px dashed purple; border-bottom: 1px dashed orange; border-right: double blue; border-top-left-radius: 10px; border-bottom-right-radius: 10px;">This is a div element with more than one colors, types of borders and radius.</div>

So, we should have the following results.

This is a div element with more than one colors, types of borders and radius.

Conclusion

In this article we learnt about borders in css, how to give our elements lines around them with solid, dotted, dashed and double borders and giving the border a specific color and radii with examples.