borderRadius property rounds the corners of a layer and is defined in points.
Here’s an example of a button with rounded corners:
# A big blue iOS button iOSButtonBig = new Layer width: Screen.width-20 height: 57 borderRadius: 12.5 backgroundColor: "DodgerBlue" x: 10 y: 30
When the border radius on a square is half its size, you’ll have… a circle. There are a few different ways to create a circle in code:
# use half the width or height circle1 = new Layer size: 120 borderRadius: 60
# or use a percentage, because you might # change the size of the layer later on circle2 = new Layer size: 120 borderRadius: "50%"
# or set the border radius afterwards # using the width or height value circle3 = new Layer size: 120 circle3.borderRadius = circle3.width/2
# or just set a high enough value circle4 = new Layer size: 120 borderRadius: 500
Since the release of Framer Design, you can now also set different values for the individual corners.
differentCorners = new Layer size: 320 backgroundColor: "rgb(45,215,170)" borderRadius: topLeft: 20 topRight: 40 bottomLeft: 160 bottomRight: 80
background-color, this is a CSS property:
border-radius. This means you can use its CSS notation to, for instance, have rounded corners with an elliptical arc (by adding a second radius value after the
elliptical = new Layer width: 200 height: 320 backgroundColor: "rgb(125,221,17)" borderRadius: "80px / 120px"
oval = new Layer width: 200 height: 320 backgroundColor: "rgb(135,125,215)" borderRadius: "100px / 160px"
(It’s CSS, so you have to use
px and write everything between
Know that you can’t set border radius on video layers. Well, you can, but it will not make a visual difference.
A solution is to give the video layer a parent layer (with border radius, obviously), on which you enable masking.