This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Junhyuk Jang
Posted Nov 03 - Read on Facebook

Hi guys. I want to add css ‘outline’. so I did copy & paste this syntax on framerjs/docs, but it doesn't work. How can I fix it??


Stephen Crowley

"border" doesn't work?

Nils Hoenson

Like Stephen Crowley said: you can use the "border" property instead.

Junhyuk Jang

yes, it works, but I want to add outline not border.

Junhyuk Jang

I want to draw outline with radius. I think border can't make it.

Min-Sang Choi

I think it's problem with fs viewer. Check it with browser, should be rendered fine.

Stephen Crowley

I thought about that after I sent my reply, sorry about that Jun-Hyuk Jang

Junhyuk Jang

it's ok, Stephen. I don't want to make border-radius that has square inside. I want to make radius inside.

Benjamin Den Boer

Hey Jun-Hyuk Jang & Jérémy Jones - ah, yes, this is due to an issue caused by 3D transforms in CSS. To make outlines work, simply add the following line to your layer :) :

layerA.force2d = true
More on force2d:

Jordan Robert Dobson

You might be better off just using box-shadow something like box-shadow: 0 0 0 1px red; would give you a 1px outline on the outside of the box. If you want the outline on the inside do box-shadow: inset 0 0 0 1px red; Basically the value you would want to manipulate is the the spread (I set it to 1px) and color. The downside is you can't do dotted lines or dashed lines however.

Jordan Robert Dobson

Here you go... I hope this helps:

Jordan Robert Dobson

The benefit is you can still stay in 3D mode instead of moving to 2D.

Josh Rule

Jordan Robert Dobson why does it move you out of 3d mode? It seems weird to use box-shadows since they are not very performant in css.

Jordan Robert Dobson

Josh Rule see Benjamin's comment above. If you want outline you need to force2D.

Box shadows aren't bad with performance. It all depends on how you use them and if the layer is hardware accelerated. All framer layers are... So by forcing 2D you're degrading performance for a specific feature. It's a choice.

Jordan Robert Dobson

I would avoid border cause it messes with your layout. And then you need box sizing etc.

I've been trying to teach this for a long time. Ditch borders unless you put them in pseudo elements or you truly need them for layout.

Read the entire post on Facebook