CSS corner-shape playground

Experiment with corner-shape and border-radius to build rounded, beveled, notched, or scooped corners by corner or pair with modern CSS.

CSS output

Shorthand Individual

All Individual Corner pairs

Physical properties apply directly to the element's sides, while logical properties apply to the element's sides based on the text direction.

Physical Logical

Left to right Right to left

Shape

Shape

Shape

Shape

Shape

Shape

Shape

corner-shape

HTML

<div class="corner-shape"></div>

CSS

.corner-shape {
  border-radius: 40px;
  corner-shape: round;
}