Border radius

The 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

Just like 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.