CSS Tricks
CSS Trick

Circle: border-radius vs clip-path

Two ways to make circles, but only clip-path gives you a circular click area.

#css #shapes #clip-path #border-radius

Browser Support

✓ Chrome 55+ ✓ Firefox 54+ ✓ Safari 9.1+ ✗ Edge

Creating Circles

border-radius: 50% looks circular but has a square hitbox. clip-path: circle() clips the actual click area.

/* Square hitbox */
.avatar {
  border-radius: 50%;
}


/* Circular hitbox */
.avatar {
  clip-path: circle(50%);
}

Live Demo

Circle Hitbox
HOVER
80px
CSS Code
.circle-demo {
display: flex;
gap: 3rem;
align-items: center;
justify-content: center;
}
.circle-item {
text-align: center;
}
.circle-box {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 0.65rem;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.circle-box:hover {
transform: scale(1.1);
}
.border-radius-circle {
background: linear-gradient(135deg, #8b5cf6, #06b6d4);
border-radius: 50%;
}
.border-radius-circle:hover {
box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}
.clip-path-circle {
background: linear-gradient(135deg, #06b6d4, #8b5cf6);
clip-path: circle(50%);
}
.circle-label {
margin: 0.5rem 0 0 0;
font-size: 0.75rem;
opacity: 0.6;
}

Hover near the corners of each circle. The left one responds to the invisible square area; the right one only responds within the circle.

Share this CSS trick

Comments