Overflow, Shadows, Rounded Corners and Opacity

Learn the CSS overflow property, text-overflow ellipsis, border-radius for rounded corners, box-shadow and opacity: the small tools that make a design feel polished.

What does CSS overflow do?

Overflow happens when the content is bigger than its box. For example, a long text in a box with a fixed height. The overflow property decides what to do with the extra content:

Value	What happens
visible	Default. The content spills out of the box.
hidden	The extra content is cut off and cannot be seen.
scroll	Scrollbars always appear, even if they are not needed.
auto	Scrollbars appear only when the content is too big.
clip	Like hidden, but it cannot be scrolled with code and does not create a scroll container.

You can also control each direction with overflow-x (horizontal) and overflow-y (vertical).

<div class="terms">
  <h3>Terms of use</h3>
  <p>By creating an account you agree to learn something new every day. Practice often, ask questions and be kind to other students. Your progress is saved automatically. You can delete your account at any time from the settings page. We never sell your data.</p>
</div>

.terms {
  max-width: 360px;
  height: 140px;
  overflow-y: auto;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 12px 16px;
  font-family: system-ui, sans-serif;
}

The terms box stays 140 pixels tall. When the text is longer than the box, a vertical scrollbar appears so the user can read the rest. If the text is short, no scrollbar appears, because the value is auto.

Tip: overflow-x: auto on a wrapper is the easiest way to make a wide table usable on a phone. The table scrolls sideways inside its box instead of breaking the whole page.

How to add an ellipsis (...) to long text

When a title is too long for one line, you can cut it with three dots, called an ellipsis. You need three properties together:

<h3 class="card-title">How to build a responsive portfolio website with HTML and CSS</h3>

.card-title {
  width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

The title stays on one line and ends with "..." where it no longer fits. white-space: nowrap stops the text from wrapping, overflow: hidden hides the extra part, and text-overflow: ellipsis draws the three dots.

Note: For more than one line, use line-clamp: 3;. For full browser support, write it with the older prefixed version too: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Rounded corners with border-radius

border-radius rounds the corners of a box. One value rounds all four corners. Four values go clockwise from the top-left: top-left, top-right, bottom-right, bottom-left.

• border-radius: 8px; – softly rounded corners, good for cards and buttons.
• border-radius: 50%; – a perfect circle, if the box is a square.
• border-radius: 999px; – a "pill" shape, great for tags and buttons.
• border-radius: 16px 16px 0 0; – only the top corners are rounded.

Common mistake: Rounding a card that contains an image, and the image's square corners poke out. Add overflow: hidden to the card, and the image is clipped to the rounded shape.

Box shadows and opacity

box-shadow adds a shadow around a box. The values are: horizontal offset, vertical offset, blur, spread (optional) and color. Add inset at the start for an inner shadow. You can list several shadows separated by commas.

opacity makes a whole element see-through, from 0 (invisible) to 1 (fully visible). It affects everything inside, including text and images. To make only the background see-through, use a color with transparency instead, like rgb(0 0 0 / 0.5).

Here is a profile card that uses all four tools:

<div class="profile">
  <img class="avatar" src="https://picsum.photos/200" alt="Photo of Maya">
  <h3>Maya Lopez</h3>
  <p class="role">Front-end developer who loves CSS animations and coffee</p>
  <span class="tag">Open to work</span>
</div>

.profile {
  width: 260px;
  padding: 24px;
  text-align: center;
  background: white;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 8px 24px rgb(0 0 0 / 0.08);
  font-family: system-ui, sans-serif;
  transition: box-shadow 0.2s;
}

.profile:hover {
  box-shadow: 0 4px 6px rgb(0 0 0 / 0.1), 0 16px 40px rgb(0 0 0 / 0.15);
}

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
}

.tag {
  display: inline-block;
  background: #dcfce7;
  color: #166534;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
}

You see a white card with soft rounded corners floating on a gentle shadow. On hover, the shadow grows and the card seems to lift. The avatar is a perfect circle, the long job title ends with "...", the job title text is slightly faded with opacity, and the "Open to work" tag is a green pill.

Tip: Realistic shadows are soft and use low-opacity black. Two layered shadows, one small and sharp and one big and blurry, look more natural than one heavy shadow.

Practice exercise

Create a notification panel 300px wide and 200px tall that scrolls when it has more than five messages. Each message should be a rounded box with a light shadow, and read messages should look faded. Long message text should end with an ellipsis.

Hint: use overflow-y: auto on the panel, and a class like .read { opacity: 0.5; } for read messages.

Key takeaways

• overflow controls extra content: hidden cuts it, auto adds scrollbars when needed.
• An ellipsis needs white-space: nowrap, overflow: hidden and text-overflow: ellipsis.
• border-radius rounds corners; 50% on a square makes a circle.
• box-shadow takes offsets, blur, spread and color, and you can layer several.
• opacity fades the whole element, including its content.