Borders, Radius & Shadows

Transform harsh rectangular boxes into physical, touchable objects with curved corners and realistic depth.

CSS5 min readConcept 15 of 43

What it is

Every element in CSS is inherently a harsh rectangle. The border-radius property allows you to curve the corners of these rectangles.

The box-shadow property allows you to cast a shadow from the element, simulating a light source and giving the element a sense of physical elevation.

Why it matters

Modern UI design relies heavily on 'elevation'. A modal dialog feels important because it has a large shadow, making it appear closer to the user.

Similarly, rounded corners make interfaces feel softer and more approachable. Mastering these two properties is the fastest way to make your design feel premium.

How it works

**Border Radius**: border-radius: 8px curves all four corners equally. You can also specify individual corners, or use border-radius: 9999px to ensure the element forms a perfect 'pill' shape regardless of its width.

**Box Shadow**: The syntax requires several values: box-shadow: x-offset y-offset blur spread color.

For example, box-shadow: 0px 4px 12px rgba(0,0,0,0.1) casts a shadow straight down (4px), blurs it by 12px, and colors it a very sheer black.

Try it

Use the controls to adjust the border radius and elevation shadow. Notice how a higher Y-offset and Blur makes the card feel like it's lifting off the screen.

Elevation & Shaping

Border Radius

16px

Drag to the max to see the 9999px pill trick

Shadow Y-Offset

8px

Shadow Blur

24px
.card {
border-radius: 16px;
box-shadow: 0px 8px 24px rgba(0,0,0,0.4);
}
Notice how increasing the Y-offset and Blur simultaneously simulates the light source moving higher, making the card feel physically elevated off the screen.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which CSS value is commonly used to create a perfect 'pill' shape (like a modern rounded button) regardless of the element's width?
  2. 2In the rule box-shadow: 0px 4px 10px black;, what does the '10px' represent?
  3. 3How do you make a shadow appear inside the element (creating a pressed-in look) instead of outside?

Remember this

  • border-radius curves corners. Use 9999px for a perfect pill shape.
  • box-shadow creates elevation. Order: x-offset, y-offset, blur, spread, color.
  • Add the inset keyword to draw the shadow inside the box.
  • You can layer multiple shadows by separating them with commas.

Done with this concept?

Mark it complete to track your progress. No login needed.