> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# ClipRRect

> Documentation for ClipRRect

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const clipRrectPreviewJson = {
  "type": "clipRRect",
  "borderRadius": 8,
  "clipBehavior": "antiAlias",
  "child": {
    "type": "container",
    "color": "#FF0000",
    "height": 100,
    "width": 100
  }
};
export const clipRrectPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The `ClipRRect` widget in Stac allows you to clip its child using rounded rectangles. This is useful when you want to create UI elements with rounded corners.

## Usage

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacClipRRect(
      borderRadius: StacBorderRadius.all(8.0),
      clipBehavior: StacClip.antiAlias,
      child: StacContainer(
        color: StacColors.red,
        height: 100,
        width: 100,
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "clipRRect",
      "borderRadius": 8,
      "clipBehavior": "antiAlias",
      "child": {
        "type": "container",
        "color": "#FF0000",
        "height": 100,
        "width": 100
      }
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={clipRrectPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: clipRrectPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>

## Properties

| Property       | Type               | Default                                  | Description                                                                                                                                   |
| -------------- | ------------------ | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `borderRadius` | `StacBorderRadius` | `StacBorderRadius()` (0 for all corners) | The border radius of the rounded corners. Can be specified as a single value, a list of 4 values, or an object with individual corner values. |
| `clipBehavior` | `StacClip`         | `antiAlias`                              | The clipping behavior when content extends beyond the rounded rectangle.                                                                      |
| `child`        | `StacWidget`       | Required                                 | The widget to clip with rounded corners.                                                                                                      |

## BorderRadius Format Options

The `borderRadius` property can be specified in multiple formats:

### Single Value (applies to all corners)

<CodeGroup>
  ```dart Dart theme={null}
  StacClipRRect(
    borderRadius: StacBorderRadius.all(8.0),
    child: /* ... */,
  )
  ```

  ```json JSON theme={null}
  {
    "type": "clipRRect",
    "borderRadius": 8.0,
    "child": { ... }
  }
  ```
</CodeGroup>

### List Format (topLeft, topRight, bottomLeft, bottomRight)

<CodeGroup>
  ```dart Dart theme={null}
  StacClipRRect(
    borderRadius: StacBorderRadius.only(
      topLeft: 8.0,
      topRight: 16.0,
      bottomLeft: 8.0,
      bottomRight: 16.0,
    ),
    child: /* ... */,
  )
  ```

  ```json JSON theme={null}
  {
    "type": "clipRRect",
    "borderRadius": [8.0, 16.0, 8.0, 16.0],
    "child": { ... }
  }
  ```
</CodeGroup>

### Object Format (specify each corner individually)

<CodeGroup>
  ```dart Dart theme={null}
  StacClipRRect(
    borderRadius: StacBorderRadius(
      topLeft: 8.0,
      topRight: 16.0,
      bottomLeft: 8.0,
      bottomRight: 16.0,
    ),
    child: /* ... */,
  )
  ```

  ```json JSON theme={null}
  {
    "type": "clipRRect",
    "borderRadius": {
      "topLeft": 8.0,
      "topRight": 16.0,
      "bottomLeft": 8.0,
      "bottomRight": 16.0
    },
    "child": { ... }
  }
  ```
</CodeGroup>

## Clip Behavior Options

The `clipBehavior` property accepts the following values:

* `"antiAlias"` (default): Clip using anti-aliasing for smoother edges
* `"hardEdge"`: Clip without anti-aliasing for sharper edges
* `"antiAliasWithSaveLayer"`: Anti-aliased clipping with an offscreen buffer (higher quality but slower)
* `"none"`: No clipping (not recommended for ClipRRect)

## Examples

### Basic Rounded Container

<CodeGroup>
  ```dart Dart theme={null}
  StacClipRRect(
    borderRadius: StacBorderRadius.all(12.0),
    child: StacContainer(
      color: StacColors.blue,
      height: 100,
      width: 200,
    ),
  )
  ```

  ```json JSON theme={null}
  {
    "type": "clipRRect",
    "borderRadius": 12.0,
    "child": {
      "type": "container",
      "color": "#2196F3",
      "height": 100,
      "width": 200
    }
  }
  ```
</CodeGroup>

### Rounded Image

<CodeGroup>
  ```dart Dart theme={null}
  StacClipRRect(
    borderRadius: StacBorderRadius.all(8.0),
    child: StacImage(
      src: 'https://example.com/image.jpg',
      width: 200,
      height: 200,
      fit: StacBoxFit.cover,
    ),
  )
  ```

  ```json JSON theme={null}
  {
    "type": "clipRRect",
    "borderRadius": 8.0,
    "child": {
      "type": "image",
      "src": "https://example.com/image.jpg",
      "width": 200,
      "height": 200,
      "fit": "cover"
    }
  }
  ```
</CodeGroup>

### Card with Different Corner Radii

<CodeGroup>
  ```dart Dart theme={null}
  StacClipRRect(
    borderRadius: StacBorderRadius(
      topLeft: 20.0,
      topRight: 20.0,
      bottomLeft: 0.0,
      bottomRight: 0.0,
    ),
    child: StacContainer(
      color: StacColors.white,
      padding: StacEdgeInsets.all(16.0),
      child: StacColumn(
        children: [
          StacText(
            data: 'Card Title',
            style: StacTextStyle(fontSize: 18.0, fontWeight: StacFontWeight.bold),
          ),
          StacText(data: 'Card content goes here'),
        ],
      ),
    ),
  )
  ```

  ```json JSON theme={null}
  {
    "type": "clipRRect",
    "borderRadius": {
      "topLeft": 20.0,
      "topRight": 20.0,
      "bottomLeft": 0.0,
      "bottomRight": 0.0
    },
    "child": {
      "type": "container",
      "color": "#FFFFFF",
      "padding": 16.0,
      "child": {
        "type": "column",
        "children": [
          {
            "type": "text",
            "text": "Card Title",
            "style": {
              "fontSize": 18.0,
              "fontWeight": "bold"
            }
          },
          {
            "type": "text",
            "text": "Card content goes here"
          }
        ]
      }
    }
  }
  ```
</CodeGroup>

## Related Widgets

* [Container](container.md) - Often used as a child of ClipRRect
* [Card](card.md) - A pre-styled container with elevation and rounded corners