Layers » Border radius

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
Download Framer project

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
Download Framer project
Different border radius values, all circles

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)"
        topLeft: 20
        topRight: 40
        bottomLeft: 160
        bottomRight: 80
Download Framer project
Setting border radius on individual corners

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"
Download Framer project

(It’s CSS, so you have to use px and write everything between " ".)

Elliptical instead of circular corners

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.