Borders, Border-Radius & Shadows
A border is a line drawn around an element's padding, and it needs three things to actually show up: a width (border-width: 2px), a style (border-style: solid, dashed, dotted), and a color (border-color: #1E2A5A) or all three at once with the shorthand border: 2px solid #1E2A5A. border-radius rounds the corners of that border (and the box itself), taking a pixel value like 8px for a subtle rounded card, or a huge value like 50% to turn a perfect square into a full circle. box-shadow adds a soft drop-shadow behind an element, written as horizontal-offset vertical-offset blur-radius color, like box-shadow: 0 4px 12px rgba(0,0,0,0.15) the rgba color here includes a fourth number for transparency (0 to 1), letting the shadow fade softly instead of showing a hard-edged block.
Why this matters
- ·border-radius gives an instant, modern rounded look without any images
- ·box-shadow adds depth and hierarchy, making elements feel 'lifted' off the page
- ·Borders can highlight focus states or errors clearly and accessibly
Common mistakes
- ·A border needs width, style, AND color to show missing any one means no visible border at all
- ·Overusing heavy box-shadows on every element makes a page feel cluttered and slow
- ·border-radius: 50% only makes a circle if the element's width and height are equal
Frequently asked questions
A border needs all three: width, style, and color. Most often, the style (like solid) is missing, and without it the border defaults to invisible.
Practice questions
Question 1
Give a div rounded corners of 20px and a subtle box-shadow, using the internal method.
Question 2
Make a 60px by 60px div into a perfect circle with a solid border.
Quick check
Just for this topic answer honestly, then check yourself.
1 / 10