In CSS, borders and shadows can add visual interest and depth to elements on a web page. Borders can be applied to create a visible boundary around a component, while shadows can develop a sense of depth and separation between elements.
Here are some examples of how to use CSS borders and shadows:
- Border Styles
You can choose from several border styles, 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.