CSS Borders

CSS Borders

In this lesson, we will learn about CSS border properties. Add border color, style, and width to make the elements look more amazing.

CSS Borders covers the following styles,

CSS border-style property (Set Border Style)

With CSS, you can add different border styles. This makes the usage of HTML elements more fruitful, since you can easily style them in CSS and make CSS borders look amazing.

The border-style property is what you should be aware of to add different styles to your borders. Let’s see one of them first,

Here’s the output,

CSS Borders style solid

In the above figure and code, you can see we added the border style to solid. Now, here are some more examples showcasing other amazing border styles,

Here’s the output,

CSS Border Styles

CSS border-color property (Set Border Color)

With the border-color property, you can easily set border to any element. Here, we will learn how to set border to our content.

We will set the border color to orange with border-color: orange  as shown below,

Here’s the output, which sets the border,

CSS Border Color property

Above, we learned how to set border color in CSS.



Also Read
: Learn how to work with colors in CSS to set background color.



Now, we will learn how to work with border-width property.

CSS border-width property (Set Border Width)

If you want a thick border for your element or border width exactly what you would love to have, then you can easily do it with the CSS border-width property. Here, we are creating a thin border for our content with 1px value for our property border-width,

Here’s the output,

CSS Border Width property

CSS border-left-color Property (Set Border Left Color)

CSS also provides you with properties to set border to your element for different positions i.e. left, right, top, bottom. Here, we will see how to add color to an element’s left border.

Here’s the output,

CSS Border Left Color

CSS border-right-color Property (Set Border Right Color)

CSS Borders also provide you with properties to set border to your element for different positions i.e. left, right, top, bottom. Here, we will see how to add color to an element’s right border.

Here’s the output,

CSS Border Right Color

CSS border-bottom-color Property (Set Border Bottom Color)

CSS also provides you with properties to set border to your element for different positions i.e. left, right, top, bottom. Here, we will see how to add color to an element’s bottom border.

Here’s the output,

CSS Border Bottom Color

CSS border-top-color Property (Set Border Top Color)

CSS also provides you with properties to set border to your element for different positions i.e. left, right, top, bottom. Here, we will see how to add color to an element’s top border.

Here’s the output,

CSS Border Top Color

CSS border-radius property (Create Rounded Borders)

With CSS Borders border-radius property, easily add rounded borders to your element. Here, we will see how,

Here’s the output,

CSS Rounded Borders

Note: Remember the following are the same,

To minimize code, you can add all border properties into a single line as shown below. With border property, we have set the border width, style and color in one line as shown below,

CSS Images
CSS Tutorial
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create free tutorials for all.

No Comments

Post A Comment