CSS border properties allow us to set the style, color, and width of the border.
Note: Different properties can be set for all the different borders i.e.top border, right border, bottom border, and left border.
Properties of CSS Borders:
1. Border Style
2. Border Width
3. Border Color
4. Border individual sides
5. Border radius property
1. Border Style: The border-style property specifies the type of border. None of the other border properties will work without setting the border style.
Following are the types of borders:
- dotted – It describes a dotted border
- dashed – It describes a dashed border
- solid – It describes a solid border
- double – It describes a double border
- groove – It describes a 3D grooved border.
- ridge – It describes a 3D ridged border.
- inset – It describes a 3D inset border.
- outset – It describes a 3D outset border.
- none – It describes no border
- hidden – It describes the hidden border
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed;
}
p.solid {
border-style: solid;
}
p.double {
border-style: double;
}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>Geeksforgeeks</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
</body>
</html>
|
Output:
2. Border Width: Border width sets the width of the border. The width of the border can be in px, pt, cm or thin, medium, and thick.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 8px;
}
</style>
</head>
<body>
<p>
Geeksforgeeks
</p>
<p>
Border properties
</p>
</body>
</html>
|
Output:
3. Border Color: This property is used to set the color of the border. Color can be set using the color name, hex value, or RGB value. If the color is not specified border inherits the color of the element itself.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-color: red
}
</style>
</head>
<body>
<p>
Geeksforgeeks
</p>
<p>
Border properties:color
</p>
</body>
</html>
|
Output:
4. Border individual sides: Using border property, we can provide width, style, and color to all the borders separately for that we have to give some values to all sides of the border.
Syntax:
border-top-style : dotted;
border-bottom-width: thick;
border-right-color: green;
etc.
Example: In this example, we set border-top-style as dotted in h2.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-top-style: dotted;
}
</style>
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
</body>
</html>
|
Output:
More Examples on CSS Border:
Example: In this example, we use border style, and border style property on the p tag.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid dashed dotted double;
border-color: red;
}
</style>
</head>
<body>
<p>
Geeksforgeeks
</p>
<p>
Border properties:color
</p>
</body>
</html>
|
Output:
Syntax: If border properties have 3 values then:
border-style: solid dotted double
Solid:top border
Dotted: Left and right border
Double: bottom border
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid dashed dotted;
border-color: blue;
}
</style>
</head>
<body>
<p>
Geeksforgeeks
</p>
<p>
Border properties:color
</p>
</body>
</html>
|
Output:
Syntax: If border properties have 2 values
border-style:solid dotted
Solid:top and bottom border
Dotted: right and left border
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid dashed;
border-color: blue;
}
</style>
</head>
<body>
<p>Geeksforgeeks</p>
<p>
Border properties:color
</p>
</body>
</html>
|
Output:
Syntax: If border properties have 1 value
border-style:dotted
Dotted:top, bottom, left and right border
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-color: green;
}
</style>
</head>
<body>
<p>
Geeksforgeeks
</p>
<p>
Border properties:color
</p>
</body>
</html>
|
Output:
5. Border radius property: It is used to round the corner of the border that looks more attractive.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
text-align: center;
background: green;
border-radius: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
|
Output:
.png)
Supported Browsers:
- Google Chrome 1 and above
- Internet Explorer 4 and above
- Firefox 1 and above
- Opera 3.5 and above
- Safari 1 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
06 Jul, 2023
Like Article
Save Article