We’ve just changed border radius, so naturally (and just like in CSS), a layer can have an actual border as well.
You can set the border’s style, width, and color. Here’s a simple example:
layerA = new Layer borderStyle: "dashed" borderColor: "#000" borderWidth: 8
Whichever style you pick, the border will always be drawn on the inside of the layer.
borderStyle can be any of these four options:
|What you would expect.|
|A series of short square-ended dashes. Chrome puts less spacing between the dashes than Framer and Safari.|
|Actually they’re more ‘small squares’ in Framer (and Safari), but in Chrome, you’ll get dots.|
|Two borders for the price of one, the width of the borders will be equal.|
Yes, I also wondered: “Can we change the spacing between those dashes or dots?”
Apparently, we can’t. The CSS documentation for
border-style states that “The exact size and length of the segments are not defined by the specification and are implementation-specific.”
borderColor property requires a string in CSS color format, just like Background color. The default value is the also same gray as the default background color.
The thickness of the border in points.
You can also pass it an object instead of just a number. In other words: you can give each side a different thickness, like this:
layerA = new Layer borderStyle: "dotted" borderColor: "#000" borderRadius: 36 borderWidth: top: 2 right: 6 bottom: 8 left: 10
(Comparable to setting the border radius of individual corners.)
borderStyle can’t be animated, but
Here are some examples of animating
borderWidth (globally or on different sides) and
On the blue layer,
bottom width are animated first, then, after a 🛠 Delay, the
left sides, etc.
# Blue layer layer_A.onTap -> @animate borderWidth: top: 6 bottom: 1 Utils.delay .5, => @animate borderWidth: right: 1 left: 6 …
On the remaining three layers the global
borderColor are animated with state animations.
# Orange layer layer_B.states.a = borderWidth: 52 borderColor: "#877DD7" layer_B.onTap -> @stateCycle()
(By the way, it seems you can’t use individual border widths in state animations.)