CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a document written in HTML or XML. One of the many properties you can use with CSS is theborder property, which allows you to set the width, style, and color of an element's border.
Here are some common ways to use theborder property:
Basic Border Syntax
selector {
border: width style color;
}width: The thickness of the border. It can be specified in various units likepx,em,rem, etc.
style: The line style of the border. Common values includesolid,dashed,dotted,double,groove,ridge,inset, andoutset.
color: The color of the border. This can be specified using color names, hexadecimal codes, RGB, RGBA, HSL, or HSLA.
Example
.box {
border: 2px solid #000; /* 2px thick black solid border */
}Shorthand Property
You can also use shorthand properties to set different sides of the border separately:
Single Value
selector {
border: 1px solid black; /* All sides */
}Different Values for Each Side
selector {
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px double orange;
}Individual Border Properties
You can also set individual properties for each side of the border:
border-width: Sets the width of the border.
border-style: Sets the style of the border.
border-color: Sets the color of the border.
Example
.box {
border-top-width: 2px;
border-top-style: solid;
border-top-color: red;
border-right-width: 3px;
border-right-style: dashed;
border-right-color: green;
border-bottom-width: 4px;
border-bottom-style: dotted;
border-bottom-color: blue;
border-left-width: 5px;
border-left-style: double;
border-left-color: orange;
}Radius and Rounding
To create rounded corners, you can use theborder-radius property:
.box {
border: 2px solid black;
border-radius: 10px; /* Rounded corners */
}Example with All Properties Together
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Example</title>
<style>
.example {
border: 2px solid #000; /* All sides */
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="example">This is a box with a border.</div>
</body>
</html>In this example, the.example class applies a 2px solid black border to all sides of thediv element. You can adjust these properties as needed to fit your design requirements.