Overview

• Assets
  • Image
  • Button and Toggle Button
  • Image Button and Image Toggle Button
  • Image Toggle Button
  • Rectangle
  • Text Input
• Collections
  • Group
  • Asset Grid
  • Asset Flow
  • Swap
  • Scroll

What is a corner radius?

How Corner Radius is measured

• Only pixel-based Corner Radius values are rendered in Composer’s Edit Mode. You need to use Composer’s Play Mode to visualize the application of a percent-based Corner Radius.
• Regardless of the unit used, the limit is the conversion of a square into a circle and a rectangle into an oval.
  This translates to a max of 50% when using a percentage. For pixels, the max value depends on the size of the asset or collection.

Pixels (px)

Example
Corner Radius: 50 / Corner Radius: 50px
The result: Each corner will trace a circle with a radius of 50 pixels.

• This is the default unit. If no unit is specified, pixels are used.
• A pixel-based corner radius is a fixed measurement, so it does not scale with the asset or collection’s size or shape. Therefore, the larger the asset or collection, the less pronounced the rounding will appear at the corners.
  Example: Both of the following images started as squares, and both have a Corner Radius of 180. Notice that only the smaller image appears fully rounded.
  

Percentage (%)

Example
Corner Radius: 25%
The result: Each corner will trace a circle (if the original is square) or an ellipse (if the original is rectangular) with a radius that is 25% of each side's length.

1. This Corner Radius is calculated as a percentage of the element's dimensions (width for the horizontal radius, height for the vertical radius).
2. The max possible value is 50%. With this Corner Radius, a square of any size will appear round, and a rectangle of any size will appear oval.
   Example: The rectangle Image Asset on the left is given a Corner Radius of 50%.
   

Specifying the Corner Radius

• If blank, no corner radius is applied, and each corner is squared at a 90-degree angle.
  
• One value: Applies to all four corners
• Example: ‘90’
  
• Two values: The first number applies to the top-left and bottom-right corners, the second number applies to the top-right and bottom-left corners.
• Example: ‘180 0’ (or ‘180,0’)
  
• Four values: These numbers apply to the top-left, top-right, bottom-right, and bottom-left corner, in that order.
• Example: ‘0 45 90 180’ (or ‘0,45,90,180’)
  

Touch sensitivity of rounded corners

Limitations

• When rendering the corner radius, Player can work with values between 0 and half the length of the smallest side of the asset, while Player Classic can handle a radius between 0 and the length that is halfway between the width and height of the asset. This means the limits are somewhat different.
• Animation duration will not be applied to the corner radius even if they can be configured during edit mode.
• Tizen Based devices do not support Corner Radius property for Collections. In case of Collections, if no Border defined, the radius will not be applied. When a Border is defined, the content will not be clipped by the radius.