koenbok / Framer

Framer - Design Everything
https://framer.com
MIT License
5.85k stars 477 forks source link

Option to code a rectangle with only two rounded corners #577

Open garyfhudson opened 6 years ago

garyfhudson commented 6 years ago

I need to prototype a segmented control very like the DESIGN/CONTROL buttons on the Framer Interface. For that I need to put two buttons right next to each other with only the outermost corners of the pair rounded.

framer interface buttons

Thanks

gejoreni commented 6 years ago

There are two ways to do this.

  1. simply change only the selected borders e.g.,
button1 = new Layer
    height: 50
    width: 100
    backgroundColor: "blue"
    borderRadius: 
        topLeft: 10
        bottomLeft: 10

button2 = new Layer
    height: 50
    width: 100
    backgroundColor: "red"
    x: button1.maxX
    borderRadius: 
        topRight: 10
        bottomRight: 10 
  1. put both layers in a parent layer round all border of the parent and clip.