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
Individual border radii
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
Border radius on video layers
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.