Layer Rectangle attribute¶

class Rectangle¶

This layer attribute provides a way of drawing rectangles with rounded corners.

only border only fill border and fill

my-layout.yml¶

layers:
  - background: { color: '#4051B2' }
  - rectangle:
      radius: 50
      border:
        width: 30
        color: red
    size: { width: 500, height: 300 }
    offset: { x: 350, y: 165 }

my-layout.yml¶

layers:
  - background: { color: '#4051B2' }
  - rectangle:
      radius: 50
      color: green
    size: { width: 300, height: 500 }
    offset: { x: 450, y: 65 }

my-layout.yml¶

layers:
  - background: { color: '#4051B2' }
  - rectangle:
      radius: 50
      border:
        width: 30
        color: red
      color: green
    size: { width: 400, height: 400 }
    offset: { x: 400, y: 115 }

radius : int | float | None¶: The radius of the rounded corner in pixels. Defaults to 0 (no rounding).

Tip

If the radius is smaller than the half the border.width, then the border’s inner corners will not be rounded.

Error

If the radius is more than half the of the rectangle’s minimum width or height and not all corners are rounded, then there will be visible artifacts from rendering each corner individually.

corners : List[Literal['top left', 'top right', 'bottom right', 'bottom left']]¶

This YAML list of strings specifies which corners are rounded. By default all corners are rounded. The supported values are:

`'top left'`	`'top right'`
`'bottom left'`	`'bottom right'`

my-layout.yml¶

layers:
  - background: { color: '#4051B2' }
  - size: { width: 100, height: 400 }
    offset: { x: 225, y: 115 }
    rectangle:
      radius: 50
      corners: ['top left', 'bottom left']
      color: red
  - size: { width: 600, height: 400 }
    offset: { x: 375, y: 115 }
    rectangle:
      radius: 200
      corners: ['top right', 'bottom right']
      color: green

color : Color | Linear_Gradient | Radial_Gradient | Conical_Gradient | None¶: The shape’s fill color.

Seealso

Please review Choosing a color section for more detail.

border : Border¶: The shape’s outlining border specification.