CSS border represents a fundamental attribute employed to define and design the boundaries surrounding HTML elements. Borders play a crucial role in web design by aiding in the creation of distinction, focus, and visual appeal. Within CSS, you have access to various properties related to borders, enabling you to manage their appearance, diversity, dimensions, and form. This guide will delve into these CSS border properties and their practical implementation.
CSS Border Properties
The CSS border properties are utilized to determine the style, variety, width, and ebb and flow of the borders of a component. These properties include:
- border-style
- border-color
- border-width
- border-radius
1) CSS border-style
The Border style attribute is utilized to determine the type of border you wish to present on the webpage.
There are some border style values which are used with border-style property to define a border.
| Value | Description |
|---|---|
none |
It doesn't define any border. |
| dotted | It is used to define a dotted border. |
| dashed | It is used to define a dashed border. |
| solid | It is used to define a solid border. |
| double | It defines two borders wIth the same border-width value. |
| groove | It defines a 3d grooved border. effect is generated according to border-color value. |
| ridge | It defines a 3d ridged border. effect is generated according to border-color value. |
| inset | It defines a 3d inset border. effect is generated according to border-color value. |
| outset | It defines a 3d outset border. effect is generated according to border-color value. |
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.border-example {
width: 150px;
height: 30px;
margin: 10px;
padding: 10px;
}
.dotted {
border: 2px dotted #FFA500;
}
.dashed {
border: 2px dashed #008000;
}
.solid {
border: 2px solid #000;
}
.double {
border: 4px double #FF0000;
}
.groove {
border: 3px groove #3333FF;
}
.ridge {
border: 3px ridge #660066;
}
.inset {
border: 3px inset #006600;
}
.outset {
border: 3px outset #990000;
}
</style>
</head>
<body>
<div class = "border-example dotted"> Dotted Border </div>
<div class = "border-example dashed"> Dashed Border </div>
<div class = "border-example solid"> Solid Border </div>
<div class = "border-example double"> Double Border </div>
<div class = "border-example groove"> Groove Border </div>
<div class = "border-example ridge"> Ridge Border </div>
<div class = "border-example inset"> Inset Border </div>
<div class = "border-example outset"> Outset Border </div>
</body>
</html>
Output:
2) CSS border-width
The border-width attribute controls the thickness of the border, which is specified in pixels. Alternatively, you have the option to utilize one of the three predefined values: thin, medium, or thick, to define the border's width.
Note: The border-width property isn't utilized alone. It is constantly utilized with other border properties like "border-style" property to set the border first any other way it won't work.
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS for different border widths */
.thin-border {
border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */
}
.medium-border {
border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */
}
.thick-border {
border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */
}
.custom-border {
border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */
}
</style>
</head>
<body>
<!-- HTML elements with different border widths -->
<p class = "thin-border"> Thin Border </p>
<p class = "medium-border"> Medium Border </p>
<p class = "thick-border"> Thick Border </p>
<div class = "custom-border"> Custom Border </div>
</body>
</html>
Output:
3) CSS border-color
There are three strategies to set the color of the border.
- Name: It determines the color name. For instance: "red".
- RGB: It determines the RGB worth of the color. For instance: "rgb(255,0,0)".
- Hex: It determines the hex worth of the color. For instance: "#ff0000".
Note: The border-color property isn't utilized alone. It is constantly utilized with other border properties like "border-style" property to set the border first any other way it won't work.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.my-element {
width: 200px;
height: 100px;
border: 2px solid #333; /* The Initial border color is dark gray */
transition: border-color 0.5s; /* Adding a smooth transition effect */
}
.my-element:hover {
border-color: blue; /* This changes the border color to blue when hovering */
}
</style>
</head>
<body>
<div class = "my-element"> Hover </div>
</body>
</html>
Output: