Boxes Demo
Create three boxes below with different border styles, padding and margin.
Box 1 — Solid border
Use a solid border and moderate padding.
Box 2 — Dotted border
Use a dotted border and larger padding.
Box 3 — Dashed border & rounded corners
Use a dashed border, rounded corners and different margin values.
Centering Demo
Implement two methods to center an element horizontally:
Centered using margin: 0 auto;
Centered using Flexbox
Box-sizing & Outline
Show why box-sizing: border-box; helps with predictable sizing.
Default box model (content-box) vs border-box — add comments in README or CSS.
Outline vs Border
Apply an outline to the element below to show it doesn't affect layout.
Hover & Transition
Add a hover effect for boxes that changes border color smoothly.
Hover me
Hover me
Optional: Responsive Grid
(Bonus) Create a grid of boxes that wraps on small screens using Flexbox or Grid.
1
2
3
4