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%;
}
When you provide two values, the first controls the horizontal radius and the second controls the vertical radius, creating an elliptical curve.
Creating a circle example:
div {
width: 200px;
height: 200px;
border-radius: 50%;
}
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.
Syntax:
/* x-offset | y-offset | blur | spread | color */ box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
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;
}
Inner shadows are great for “pressed” button states, input fields, or recessed panels.
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.
