Border Radius
The border-radius property is used to add rounded corners to an element. You can specify one value for all four corners or provide individual values for each corner.
Uniform Border Radius:
div {
border-radius: 20px; /* All 4 corners will have the same radius */
}
Individual Border Radius:
div {
/* Clockwise from top-left: top-left, top-right, bottom-right, bottom-left */
border-radius: 20px 10px 15px 5px;
}
You can even create elliptical shapes by defining two distinct values for each corner (horizontal and vertical radii).
div {
border-radius: 50% 25%;
}
Box Shadow
The box-shadow property is used to cast a shadow behind an element. It's versatile and can be used to produce various effects like depth, focus, or even inner shadows.
The property generally has the following values: horizontal offset, vertical offset, blur radius, spread radius, and color.
Simple Shadow:
button {
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
/* Horizontal offset: 5px,
Vertical offset: 5px,
Blur: 15px,
Color: semi-transparent black */
}
Inner Shadow:
button.active {
/* The 'inset' value makes the shadow appear inside the element */
box-shadow: inset 0 0 10px #888;
}
The border-radius and box-shadow properties are potent tools in your CSS arsenal. They allow for nuanced changes in design, adding depth, focus, and overall visual appeal. Experiment with different values, combine them, and you'll see how these simple properties can transform your designs from flat and dull to dynamic and engaging.
