How to make a rounded border with blits

Get Help
1

I’ve seen lightning examples there is an example for a border, but not work for (Blits) can you please help me to show example with Blits or guide me with code.

2

Hi @zaid.butt

You should use effects attribute to configure different shaders via blits.

simple example code snippet looks like

<Element color="#a6a6a6" x="100" y="100" w="100" h="100" :effects="[$shader('border', {width: 10, color:'#ff0000'})]">
1 Like
3

hi @Gsk thanks for reply , can you please update if border/radius need to be only top and right not other sides. how to add like this because in css are very common and simple way like this
=== border top and right only ===
border-top: 1px solid red;
border-right: 1px solid red;

=== border-radius ===
border-top-left-radius: 5px;
border-top-right-radius: 5px;

4

Hi @zaid.butt

you can use, borderLeft, borderRight, borderTop & borderBottom as shader name.

1 Like
5

Coming to border-radius, to my knowledge, At present implementation we can only apply radius shader for complete node .

I will get back to you with more information

6

Thanks @Gsk for your help, Best regards

7

@Gsk I’m also wondering about configuring a different radius for top/bottom. Is this still not possible?

8

You can - Lightning Playground radius supports an array of values for each corner

1 Like
9

Thanks so much @chiefcll