CSS <basic-shape> Data Type

Description

The <basic-shape> CSS data type represents a simple geometric shape used primarily with the clip-path property to define a clipping region for an element. These shapes allow developers to mask content within a specific area without altering the document flow. Typical shapes include circles, ellipses, inset rectangles, and polygons. By using <basic-shape>, you can create visually appealing effects such as rounded elements, diagonal cuts, or even complex polygonal masks.

One of the key advantages of <basic-shape> is that it can be combined with the clip-path property in responsive layouts. Shapes can use absolute units, percentages, or the <length> and <percentage> data types, enabling them to adapt to container size changes seamlessly. For instance, using percentages makes a circular mask scale proportionally with the element.

<basic-shape> also interacts with other visual properties such as mask-image or transformations, allowing for dynamic visual effects. When combined with transition or animation, these shapes can animate between states, providing more engaging user interfaces.

Examples

Circle:

div {
  clip-path: circle(50% at 50% 50%);
}

Ellipse:

div {
  clip-path: ellipse(50% 25% at 50% 50%);
}

Inset rectangle:

div {
  clip-path: inset(10% 20% 10% 20%);
}

Polygon:

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

These examples demonstrate how <basic-shape> can be used to clip elements in different ways, providing flexibility and creativity for modern web layouts.

Syntax

refer to values below for each syntax

Values

inset()Defines an inset rectangle. When all of the first four arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. These arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values.
syntax: inset() = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
circle()The shape-radius argument represents r, the radius of the circle. Negative values are invalid. A percentage value here is resolved from the used width and height of the reference box as sqrt(width2+height2)/sqrt(2). The position argument defines the center of the circle. This defaults to center if omitted.
syntax: circle() = circle( <shape-radius>? [ at <position> ]? )
ellipse()The shape-radius arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box. The position argument defines the center of the ellipse. This defaults to center if omitted.
syntax: ellipse() = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
polygon()<'fill-rule'> - The filling rule used to determine the interior of the polygon. Possible values are nonzero or evenodd. Default value when omitted is nonzero. Each pair argument in the list represents x_I and y_I - the x and y axis coordinates of the i-th vertex of the polygon.
syntax: polygon() = polygon( <'fill-rule'>? , [<length-percentage> <length-percentage>]# )

Example

HTML

<div class="wrap">

  <h1>&lt;basic-shape&gt; examples</h1>

  <div class="row">

    <figure class="card circle">

      <img src="https://picsum.photos/400/300?random=1" alt="Circle">

      <figcaption>circle()</figcaption>

    </figure>



    <figure class="card ellipse">

      <img src="https://picsum.photos/400/300?random=2" alt="Ellipse">

      <figcaption>ellipse()</figcaption>

    </figure>



    <figure class="card inset">

      <img src="https://picsum.photos/400/300?random=3" alt="Inset">

      <figcaption>inset()</figcaption>

    </figure>



    <figure class="card polygon">

      <img src="https://picsum.photos/400/300?random=4" alt="Polygon">

      <figcaption>polygon()</figcaption>

    </figure>

  </div>

</div>

CSS

/* Basic layout */
:root {
  --card-w: 240px;
  --card-h: 160px;
}

* { box-sizing: border-box; }

body {
  margin: 24px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, #f6fbff, #eef6ff);
  color: #0b2545;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
}

h1 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
}

.row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* Cards */
.card {
  width: var(--card-w);
  height: var(--card-h);
  background: #ddd;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 6px 18px rgba(11,37,69,0.08);
  display: inline-block;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 13px;
  border-radius: 6px;
}

/* Examples of CSS  values using clip-path */

/* 1) circle(radius at center) */
.card.circle {
  clip-path: circle(40% at 50% 40%);
}

/* 2) ellipse(rx ry at cx cy) */
.card.ellipse {
  clip-path: ellipse(45% 30% at 50% 50%);
}

/* 3) inset(top right bottom left round [radii]) */
.card.inset {
  /* inset with rounded corners (uses 'round') */
  clip-path: inset(10% 15% 20% 5% round 12px 36px 12px 36px);
}

/* 4) polygon(x% y%, ...) - a custom shape */
.card.polygon {
  clip-path: polygon(
    50% 0%,
    85% 25%,
    70% 75%,
    30% 75%,
    15% 25%
  );
}

/* Accessibility: show outline when focused for keyboard users */
.card:focus {
  outline: 3px solid rgba(33, 150, 243, 0.5);
  outline-offset: 4px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS basic-shape data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.