---
title: "Rounded corners: round an element's corners"
description: "Round an element's corners with a preset, a custom global radius or a different value for each corner."
url: https://docs.vivlab.com/en/editor/style/border-radius
---

# Rounded corners

Use **Rounded corners** to soften an element's corners. Choose a preset, enter one value for all corners, or set each corner separately. The value is called the **radius**: a larger radius makes the corner more rounded.

<DocsScreenshot name="editor-radius-presets" alt="Rounded corner presets, from None to Full." :width="339" :height="323" />

## Predefined roundings

The **Predefined roundings** selector offers six ready-to-use values:

- **None**: straight corners.
- **Small**: slightly rounded corners (12 px).
- **Medium**: moderate rounding (24 px).
- **Large**: pronounced rounding (48 px).
- **Extra large**: strong rounding (64 px).
- **Full**: full rounding, turns a square into a circle.

Choosing a preset applies the same value to all four corners.

## Corner roundness

For one custom rounding value for all corners, drag the **Corner roundness** slider between 0 and 500 pixels.

## Edit each corner

Click **Edit each corner** to expand the four individual sliders:

- **Top left corner**
- **Top right corner**
- **Bottom right corner**
- **Bottom left corner**

Useful to create a card with only the top rounded (top left and top right) and a flat bottom, or for "petal" or "tab" graphic effects.

## Reset

The **Reset settings** button clears every radius and reverts to straight corners.