CSS Borders play a significant role in web design by delineating elements and adding visual separation. CSS provides a range of properties to customize borders, including color, style, width, and more.
CSS Border Basics
The border property is a shorthand for setting the border width, style, and color of an element. You can use it to apply a border on all four sides of an element simultaneously.
Syntax
element {
border: width style color;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.text {
border: 2px solid #000000;
}
</style>
</head>
<body>
<div class="text">
This div has a basic black border.
</div>
</body>
</html>
CSS Border Width
The border-width property sets the width of the border. It can accept values in pixels (px), ems (em), or other CSS units.
Syntax
element {
border-width: width;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.text {
border: 5px solid #007BFF;
}
</style>
</head>
<body>
<div class="text">
This div has a 5px wide border.
</div>
</body>
</html>
CSS Border Style
The border-style property specifies the style of the border. Common values include solid, dashed, dotted, double, groove, ridge, inset, and outset.
Syntax
element {
border-style: style;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.text {
border: 2px dashed #FF5733;
}
</style>
</head>
<body>
<div class="text">
This div has a dashed orange border.
</div>
</body>
</html>
CSS Border Color
The border-color property sets the color of the border. You can use color names, hex codes, RGB, RGBA, HSL, or HSLA values.
Syntax
element {
border-color: color;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.text {
border: 3px solid rgba(0, 255, 0, 0.5);
}
</style>
</head>
<body>
<div class="text">
This div has a semi-transparent green border.
</div>
</body>
</html>
CSS Border Radius
The border-radius property rounds the corners of an element's border box. You can specify a single radius for all corners or individual radii for each corner.
Syntax
element {
border-radius: radius;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.text {
border: 3px solid #FF5733;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="text">
This div has rounded corners.
</div>
</body>
</html>
CSS Border Sides
You can apply different borders to each side of an element using the border-top, border-right, border-bottom, and border-left properties.
Syntax
element {
border-top: width style color;
border-right: width style color;
border-bottom: width style color;
border-left: width style color;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.text {
border-top: 2px solid #FF5733;
border-right: 4px dashed #33FF57;
border-bottom: 6px dotted #3357FF;
border-left: 8px double #FF33A5;
}
</style>
</head>
<body>
<div class="text">
This div has different border
styles on each side.
</div>
</body>
</html>
CSS Border Image
The border-image property allows you to use an image as the border of an element. It is a shorthand for several border-image properties.
Syntax
element {
border-image: url('path-to-image') slice-width width;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.text {
width: 200px;
height: 200px;
border: 10px solid;
border-image: url('img.png') 30 round;
}
</style>
</head>
<body>
<div class="text">
This div has an image border.
</div>
</body>
</html>
CSS Shorthand for Borders
The border shorthand property combines the width, style, and color of the border in one line.
Syntax
element {
border: width style color;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.text {
border: 4px solid #FF5733;
}
</style>
</head>
<body>
<div class="text">
This div uses the border
shorthand property.
</div>
</body>
</html>