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 to style elements with CSS is theborder property. Theborder property allows you to set the width, style, and color of an element's border.
Here are some common ways to use theborder property:
Setting All Border Properties at Once
You can set all three sub-properties (width, style, and color) at once using the shorthand syntax:
selector {
border: width style color;
}Example:
p {
border: 2px solid black;
}This sets a 2-pixel wide, solid black border around all<p> elements.
Setting Individual Border Properties
You can also set each sub-property individually using the following properties:
border-width
border-style
border-color
Example:
p {
border-width: 2px;
border-style: solid;
border-color: black;
}Shorthand for Each Side
You can specify different styles, widths, and colors for each side of the border using the following properties:
border-top
border-right
border-bottom
border-left
Example:
div {
border-top: 1px dashed red;
border-right: 2px solid green;
border-bottom: 3px dotted blue;
border-left: 4px double purple;
}Using Border Radius
To create rounded corners, you can use theborder-radius property:
div {
border: 2px solid black;
border-radius: 10px; /* Rounded corners */
}Example with Different Border Styles
Here’s a more comprehensive example that combines various border styles:
<!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>
.box {
width: 200px;
height: 200px;
border: 5px solid #000; /* Black solid border */
border-radius: 15px; /* Rounded corners */
margin: 20px;
}
.box.dotted {
border-style: dotted; /* Dotted border */
}
.box.dashed {
border-style: dashed; /* Dashed border */
}
.box.double {
border-style: double; /* Double border */
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box dotted"></div>
<div class="box dashed"></div>
<div class="box double"></div>
</body>
</html>In this example, four boxes are created with different border styles.
Summary
Theborder property in CSS is versatile and allows you to customize the appearance of an element's border in numerous ways. Whether you want a simple solid border or something more complex like a dashed or dotted border, CSS provides the tools to achieve it.