The object for creating rounded corners.
Technology
- Apple News Format 1.9+
Properties
bottom Left
boolean
A Boolean that indicates whether the bottom-left corner should be masked.
bottom Right
boolean
A Boolean that indicates whether the bottom-right corner should be masked.
curve
string
Note
Available in OS 13 and macOS 10.15.
The type of curve to use for rendering the mask’s corner.
Valid values:
circular
. Creates a rounded corner.continuous
. Creates a continuous corner.
radius
*
A supported unit or number that describes the radius of the corners in points. Corner radius cannot exceed half the component width or height, whichever is smaller.
top Left
boolean
A Boolean that indicates whether the top-left corner should be masked.
top Right
boolean
A Boolean that indicates whether the top-right corner should be masked.
type
string
The type of mask. The value is always corners
.
Discussion
Use the Corner
k object to specify the corner radius for a component, and enable or disable the effect on a per-corner basis (top
, top
, bottom
, and bottom
). All corners are enabled by default. When you specify a border alongside a corner radius, the borders take into account the radius of the mask and are drawn within the unmasked area of the component.
This object can be used in ComponentStyle.
Example
{
"components": [
{
"role": "container",
"style": "exampleComponentStyle",
"components": [
{
"role": "title",
"text": "Drought"
}
]
}
],
"componentStyles": {
"exampleComponentStyle": {
"backgroundColor": "#FF0000",
"mask": {
"type": "corners",
"radius": 25,
"topRight": false,
"bottomRight": false
}
}
}
}