Border in CSS

HTML

CSS

Java Script

Border is one of the property which allows us to specify style, width and color of an element’s border.

For eg:

This block or element contains border on all sides.

This block or element contains border bottom which is of blue color.

We can also make the borders rounded by Border radius.

This element have green border on left side.

Types of Borders in CSS

Dotted
Solid
None
Double

This is an example of dotted border. To make dotted border of an element we need to define like this: <div style=”border-style:dotted;”>.

This is an example of solid border. To make dotted border of an element we need to define like this: <div style=”border-style:solid;”>.

This is an example of none border. To make dotted border of an element we need to define like this: <div style=”border-style:none;”>.

This is an example of double border. To make dotted border of an element we need to define like this: <div style=”border-style:double;”>.

We can also increase the width of border by giving this command:

<div style=”border-width:5px;”>.

As we have seen above that we can give any color to the border of an element. Command to change the color of an element is <div style=”border-color:blue;”>

We can also create multicolor border of an element

CSS Code implementation Example

<!DOCTYPE>
<html>
<body>
<div style="border-color:red;border-style:dotted;">
<p>This is an example of dotted border</p>
</div>
<br>
<div style="border-color:black;border-style:solid;">
<p>This is an example of solid border</p>
</div>
<br>
<div style="border-color:black;border-style:none;">
<p>This is an example of none border</p>
</div>
<br>
<div style="border-color:black;border-style:double;">
<p>This is an example of double border</p>
</div>
<br>
<div style="border-color:blue;border-style:solid;border-width:5px;">
<p>This is an example to increase the width of border of an element</p>
</div>
<br>
<div style="border-color:red green yellow blue;border-style:solid;">
<p>This is an example of multicolor border</p>
</div>
</body>
</html>

Output of the above program is shown below

Python

Java

C

C++

HTML/CSS

Java Script

PHP

SQL

C Programs

Border in CSS

Types of Borders in CSS

CSS Code implementation Example

Video/ C Introduction