Layers » Border

Border

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.

Want a border on the outside? You can do that with a Shadow, take a look at Shadow spread.

Border style

A layer’s borderStyle can be any of these four options:

`"solid"`	What you would expect.
`"dashed"`	A series of short square-ended dashes. Chrome puts less spacing between the dashes than Framer and Safari.
`"dotted"`	Actually they’re more ‘small squares’ in Framer (and Safari), but in Chrome, you’ll get dots.
`"double"`	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.”

Border color

The 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.

Border width

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.)

A `"dotted"` border with a different width for every side

Border animation examples

The borderStyle can’t be animated, but borderColor and borderWidth can.

Here are some examples of animating borderWidth (globally or on different sides) and borderColor.

On the blue layer, top and bottom width are animated first, then, after a ? Delay, the right and 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 borderWidth and 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.)