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.

Presets

Choose a configuration as a starting point, then adjust any control.

Configuration

CSS output

Shorthand output groups values into CSS shorthands when possible. Individual output generates one declaration per property so each value can be reviewed or copied separately.

ShorthandIndividual

Application

Choose how values are distributed: apply one value to the whole element or adjust only the sides, axes, or groups you need.

AllIndividualCorner pairs

Property system

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

PhysicalLogical

Text direction

With logical properties, it is important to check how results change in languages written left to right and right to left.

Left to rightRight to left

All corners

Shape

Top left

Shape

Top right

Shape

Bottom right

Shape

Bottom left

Shape

Top left + bottom right

Shape

Top right + bottom left

Shape

corner-shape

HTML

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

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<div class="inline-[250px] block-[250px] bg-slate-900 border-2 border-solid border-[#94a3b8] rounded-[40px] [corner-shape:round]" dir="ltr"></div>

CSS

.corner-shape {
  inline-size: 250px;
  block-size: 250px;
  border-radius: 40px;
  corner-shape: round;
  background-color: #0f172a;
  border: 2px solid #94a3b8;
}