BorderRadius

radius rounds the element's corners (CSS border-radius semantics).

interface BorderRadius {
  tl?: number;
  tr?: number;
  bl?: number;
  br?: number;
}

Property	Corner
tl	Top-left
tr	Top-right
bl	Bottom-left
br	Bottom-right

Values are nonnegative pixels, limited by your plan's input-resolution bound. Omitted corners default to square (0). This object belongs on an IMAGE, VIDEO, or GIF visual; for HTML use CSS border-radius, and for captions use subtitle.background.radius.

Example

Property fragment for a visual element. The separate recorded preview uses 32-pixel corners; its payload is available below.

{
  "radius": {
    "tl": 10,
    "tr": 10,
    "bl": 10,
    "br": 10
  }
}

Used By

• Image Elements
• Video Elements
• GIF Elements

{
  "name": "docs-img-radius",
  "width": 960,
  "height": 540,
  "duration": 4,
  "backgroundColor": "#1e1b31",
  "visuals": [
    {
      "type": "IMAGE",
      "src": "https://cdn.pixabay.com/photo/2022/11/05/22/11/channel-7572879_1280.jpg",
      "width": 480,
      "height": 320,
      "position": "center-center",
      "radius": {
        "tl": 32,
        "tr": 32,
        "bl": 32,
        "br": 32
      }
    }
  ]
}

Rendered by Zvid

Recorded fixture: radius 32 pixels on every corner

Watch video