In CSS, borders and shadows can be used to add visual interest and depth to elements on a web page. Borders can be applied to create a visible boundary around an element, while shadows can be used to create a sense of depth and separation between elements.
Here are some examples of how to use CSS borders and shadows:
- Border Styles
There are several border styles you can choose from, including solid, dashed, dotted, double, groove, ridge, inset, and outset. You can also set the border width and color.
Example:
/* Add a solid black border to a paragraph */
p {
border: 1px solid black;
}
/* Add a dashed red border to an image */
img {
border: 2px dashed red;
}
/* Add a double blue border to a heading */
h1 {
border: 3px double blue;
}
- Border Radius
The border-radius property allows you to create rounded corners on an element’s border. You can set the radius value in pixels or as a percentage of the element’s width.
Example:
/* Add a border with rounded corners to a button */
button {
border: 2px solid blue;
border-radius: 5px;
}
/* Add a border with very rounded corners to an image */
img {
border: 1px solid black;
border-radius: 50%;
}
- Box Shadow
The box-shadow property allows you to add a drop shadow to an element. You can set the horizontal and vertical offset of the shadow, the blur radius, the spread radius, and the color of the shadow.
Example:
/* Add a black drop shadow to a div */
div {
box-shadow: 2px 2px 5px black;
}
/* Add a blue drop shadow to a heading with more spread */
h1 {
box-shadow: 0 0 10px 5px blue;
}
- Text Shadow
The text-shadow property allows you to add a drop shadow to text. You can set the horizontal and vertical offset of the shadow, the blur radius, and the color of the shadow.
Example:
/* Add a white drop shadow to a heading */
h1 {
text-shadow: 2px 2px 5px white;
}
/* Add a blue drop shadow to a paragraph */
p {
text-shadow: 1px 1px 2px blue;
}
Overall, borders and shadows are great tools to enhance the visual appeal of a website, and can be easily customized using CSS.
