CSS Shapes and Borders

Beyond the Rectangle

Every HTML element starts as a rectangle. CSS gives you two powerful tools to break out of that box: border-radius reshapes the corners, and border draws visible edges. Combined — and paired with techniques like clipping and overflow — they produce leaf shapes, droplets, diamonds, and image masks that look nothing like a <div>.

This guide shows you how.

Leaf and Droplet Shapes

Rounding three corners while leaving one sharp creates a natural, leaf-like silhouette.

.leaf {
  border-radius: 0 50% 50% 50%;
}

.droplet {
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
}

Rotate the same shape 45° and you get a droplet or raindrop. The zero-radius corner becomes the pointed tip. Adjust the percentage to control how wide or narrow the leaf appears.

Shape Variations

Three values are enough to create distinct shapes. You rarely need all four corners at different percentages unless you want an intentional asymmetry.

Diamond Shapes

A diamond is a rotated square. The secret is zero border-radius and a 45° transform.

.diamond {
  width: 100px;
  height: 100px;
  border-radius: 0;
  transform: rotate(45deg);
}

Content inside the diamond also rotates. To keep text upright, apply a counter-rotation to the inner element:

.diamond-content {
  transform: rotate(-45deg);
}

Diamonds work well as decorative accents, badge backgrounds, or navigation arrows. Keep them small — large diamonds waste considerable space in a rectangular layout.

Image Masks with Border Radius and Overflow

Want a circular or rounded image without an editing tool? Combine border-radius with overflow: hidden on the container.

.circle-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

.circle-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Why object-fit Matters

Without object-fit: cover, the image stretches to fill the container — distorting faces and landscapes. With cover, the image fills the circle and crops the excess evenly.

Both properties together guarantee a clean, distortion-free circular image.

Rounded Image Cards

.rounded-image-card {
  border-radius: 16px;
  overflow: hidden;
}

This clips both the background and the <img> child to the same 16px rounding. No extra markup required — the container enforces the shape.

Combining Border Radius with the Border Property

Borders follow the curve. A thick border on a rounded element creates a clear, smooth outline — perfect for badges and highlighted sections.

.outlined-badge {
  border-radius: 50%;
  border: 3px solid #3B82F6;
  width: 64px;
  height: 64px;
}

.dashed-card {
  border-radius: 12px;
  border: 2px dashed #94A3B8;
}

Border Style Reference

Dashed borders with rounded corners create a common "drop zone" pattern for file uploads. The rounded corners soften the rigid dashes, making the area feel approachable.

Gradient Borders with Border Radius

Standard border only supports solid colors. For gradient borders, use the border-box technique:

.gradient-border {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0F172A, #0F172A) padding-box,
    linear-gradient(135deg, #3B82F6, #8B5CF6) border-box;
}

The padding-box layer fills the interior with a solid color. The border-box layer paints the border area with a gradient. The transparent border creates the gap that the gradient fills.

CSS Clip-Path as an Alternative

border-radius only curves corners. clip-path cuts entire shapes — triangles, hexagons, stars — with vector precision.

.hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

Border Radius vs Clip-Path

Use border-radius when you need borders, shadows, or curved shapes. Use clip-path when you need geometric polygons that border-radius cannot express.

Hybrid Approach: Clip-Path and Border Radius Together

You can combine both properties. clip-path defines the outer outline; border-radius smooths the corners inside that outline:

.hybrid-shape {
  border-radius: 16px;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

This technique works well for notification banners with angled bottoms or chat bubbles with directional tails. The clip-path creates the angled cut; border-radius rounds the remaining corners.

Browser Considerations

border-radius enjoys universal support across modern browsers. No vendor prefixes needed.

clip-path is well-supported in Chrome, Firefox, Safari, and Edge — but not in Internet Explorer. If you need IE11 support, provide a border-radius fallback:

.shape {
  border-radius: 12px; /* fallback */
}

@supports (clip-path: polygon(0 0)) {
  .shape {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border-radius: 0; /* remove fallback rounding */
  }
}

The @supports rule detects clip-path support and swaps the shape only when it works.

Accessibility Reminders

Decorative shapes must not interfere with usability:

• Add aria-hidden="true" to decorative blobs — screen readers should skip them
• Wrap shape animations in a prefers-reduced-motion query — continuous morphing can trigger vestibular issues
• Verify contrast between overlapping shapes and text at every animation frame

@media (prefers-reduced-motion: reduce) {
  .animated-shape {
    animation: none;
  }
}

Key Takeaways

• Three rounded corners + one sharp corner = leaf shape; rotate it for a droplet
• Rotate a square 45° for a diamond — counter-rotate inner text to keep it upright
• Pair border-radius with overflow: hidden and object-fit: cover for clean circular images
• Gradient borders require the padding-box / border-box background layering technique
• Use clip-path for polygons border-radius cannot create (triangles, hexagons, stars)
• clip-path clips borders and shadows — choose border-radius when you need them
• Combine clip-path and border-radius for hybrid shapes with mixed edges
• Provide border-radius fallbacks inside @supports for clip-path if IE11 matters
• Always add reduced-motion fallbacks for animated shapes

Try It Yourself

Build and preview rounded corner shapes interactively with our Border Radius Generator. Create gradient backgrounds for your shapes using the CSS Gradient Generator — then copy both rules into your project.