Deep Dive With CSS - Border

Ajay Malik
8y
5.9k
0
2

Article

In CSS, border property is used to enable a border around HTML element and border property also has the different property to change the border like color, style and width.

CSS Border Properties

CSS Border Properties are used to create a border to a particular element and it also defines the boundary of the element.

Border Style

To define the type of the border, which is applied to HTML element, border-style property is used.

Syntax

selected_element

{

border-style:style_type;

}

type of style are listed below.

dotted

To define dotted border style, dotted border style is used.

Example
1. <!DOCTYPE html>
2. <html>
4. <head>
5. <style>
6. h1 {
7. border-style: dotted;
8. }
9. </style>
10. </head>
12. <body>
13. <h1>c# corner</h1>
14. <p>c-sharpcorner.com</p>
16. </html>
Output
solid

To define solid border style, dotted border style is used.

Example
1. <!DOCTYPE html>
2. <html>
4. <head>
5. <style>
6. h1 {
7. border-style: solid;
8. }
9. </style>
10. </head>
12. <body>
13. <h1>c# corner</h1>
14. <p>c-sharpcorner.com</p>
16. </html>
Output
dashed

To define dashed border style, dashed border style is used.

Example
1. <!DOCTYPE html>
2. <html>
4. <head>
5. <style>
6. h1 {
7. border-style: dashed;
8. }
9. </style>
10. </head>
12. <body>
13. <h1>c# corner</h1>
14. <p>c-sharpcorner.com</p>
16. </html>
Output
double

To define double border style, double border style is used.

Example
1. <!DOCTYPE html>
2. <html>
4. <head>
5. <style>
6. h1 {
7. border-style: double;
8. }
9. </style>
10. </head>
12. <body>
13. <h1>c# corner</h1>
14. <p>c-sharpcorner.com</p>
16. </html>
Output
groove

To define 3D grooved border style, groove border style is used.

Example
1. <!DOCTYPE html>
2. <html>
4. <head>
5. <style>
6. h1 {
7. border-style: Groove;
8. }
9. </style>
10. </head>
12. <body>
13. <h1>c# corner</h1>
14. <p>c-sharpcorner.com</p>
16. </html>
Output
hidden

To define hidden border style, hidden border style is used.

Example
1. <!DOCTYPE html>
2. <html>
4. <head>
5. <style>
6. h1 {
7. border-style: hidden;
8. }
9. </style>
10. </head>
12. <body>
13. <h1>c# corner</h1>
14. <p>c-sharpcorner.com</p>
16. </html>
Output
none
To define no border, no border style is used.

Example
1. <!DOCTYPE html>
2. <html>
4. <head>
5. <style>
6. h1 {
7. border-style: none;
8. }
9. </style>
10. </head>
12. <body>
13. <h1>c# corner</h1>
14. <p>c-sharpcorner.com</p>
16. </html>
Output
inset

To define 3D inset border style, inset border style is used.

Example
1. <!DOCTYPE html>
2. <html>
4. <head>
5. <style>
6. h1 {
7. border-style: inset;
8. }
9. </style>
10. </head>
12. <body>
13. <h1>c# corner</h1>
14. <p>c-sharpcorner.com</p>
16. </html>
Output
outset

To define 3D outset border style, outset border style is used.
Example
1. <!DOCTYPE html>
2. <html>
4. <head>
5. <style>
6. h1 {
7. border-style: outset;
8. }
9. </style>
10. </head>
12. <body>
13. <h1>c# corner</h1>
14. <p>c-sharpcorner.com</p>
16. </html>
Output
ridge

To define 3D ridged border style, ridge border style is used.
Example
1. <!DOCTYPE html>
2. <html>
4. <head>
5. <style>
6. h1 {
7. border-style: ridge;
8. }
9. </style>
10. </head>
12. <body>
13. <h1>c# corner</h1>
14. <p>c-sharpcorner.com</p>
16. </html>
Output

Border Width

To define the width of the border, border-width property is used.
We can define a border with in px, pt, cm, em, etc.
We can also used three pre-defined values: thin, medium, or thick. to define border width.

Syntax

selected_element

{

border-width:value;

}

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-width: 5px;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>c-sharpcorner.com</p>
</html>

Output

We also define the border width, using different units like-

border-width:medium
border-width:thin
border-width:thik

Border Color

To define border color of HTML element, border-color property is used

In CSS, we can define the color, using-

Name of the color.
Hex value of the color.
RGB value of the color.

Example 1

In this example, we will use name of the color.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>c-sharpcorner.com</p>
</html>

Output

Example 2

In this example, we will use RGB value of the color.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>c-sharpcorner.com</p>
</html>

Output

Example 3

In this example, we will use Hex value of the color.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-color: #FF0000;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>c-sharpcorner.com</p>
</html>

Output

Rounded Borders

To define a rounded border of HTML element, border-radius property is used.

Syntax

selected_element\

{

border-radius:value;

}

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-color: #FF0000;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>c-sharpcorner.com</p>
</html>

Output

Up Next

Ebook Download

View all

Grid structure in css

Read by 1 people

Download Now!

Learn

View all