Day 2: Borders, Shadows & Overflow

Daily Objective

Elevate UI components with rounded corners, elevation shadows, and manage container content overflow.

1. Rounded Corners & Shadows

.card {
  border-radius: 12px;
  /* box-shadow: x-offset y-offset blur spread color */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.headline {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

2. Managing overflow

• visible: Default; content spills out of the container bounds.
• hidden: Excess content is clipped.
• scroll: Always displays scrollbars.
• auto: Adds scrollbars only when content exceeds dimensions.

.scroll-container {
  height: 200px;
  overflow-y: auto;
}

Daily Hands-on Practice (70%)

1. Build a card with border-radius: 8px and an interactive shadow that lifts on :hover.
2. Create a fixed-height box with overflow-y: auto and populate it with long text.