# Can I create this type of effect in Thunkable?

**URL:** https://community.thunkable.com/t/can-i-create-this-type-of-effect-in-thunkable/3376517
**Category:** Questions about Thunkable X
**Created:** [November 29, 2024, 2:16pm UTC](https://community.thunkable.com/t/can-i-create-this-type-of-effect-in-thunkable/3376517 "2024-11-29T14:16:17Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![steve\_synopsis](https://avatars.discourse-cdn.com/v4/letter/s/48db29/32.png) [@steve\_synopsis](https://community.thunkable.com/u/steve_synopsis)
#### Post date: [November 29, 2024, 2:16pm UTC](https://community.thunkable.com/t/can-i-create-this-type-of-effect-in-thunkable/3376517/1 "2024-11-29T14:16:17Z")

</div>

Can I create this type of effect in Thunkable - with the text in the border of text input or label?

Certainly saves space on a screen.

![2024-11-29 10 14 23](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/8/98c936cfcdcad0bffe73109c0ac3b2163a99967f.png)

---

<div class="post-metadata">

### Author: ![matt\_conroy](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/matt_conroy/32/150843_2.png) [@matt\_conroy](https://community.thunkable.com/u/matt_conroy)
#### Post date: [December 2, 2024, 9:59pm UTC](https://community.thunkable.com/t/can-i-create-this-type-of-effect-in-thunkable/3376517/2 "2024-12-02T21:59:54Z")

</div>

This looks like a [fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) element. Unfortunately, not something that could be done with any of our native UI components.

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [December 2, 2024, 11:54pm UTC](https://community.thunkable.com/t/can-i-create-this-type-of-effect-in-thunkable/3376517/3 "2024-12-02T23:54:22Z")

</div>

It’s certainly possible to manually create a group with components and an image of the open border and then duplicate that group as needed:

**Design:**

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/1/31eaabea052ad1d02d13168482cce35390a13964.png)

**Preview**

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/8/1806e095d78b21015491cc303f07bc3c19d89fc2.png)

**Preview with copied group:**

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/1/f16eb60480414bc92e3311d81ceb6e77e9e652c0.png)

**Image file (not fully transparent):**

![open border](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/c/cc855c0cf99753cce5bcee50868f5b5086352469.png)

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [December 3, 2024, 12:12am UTC](https://community.thunkable.com/t/can-i-create-this-type-of-effect-in-thunkable/3376517/4 "2024-12-03T00:12:39Z")

</div>

And here’s a Layout that uses a button with a background image and text (km):

Project link: [Thunkable](https://x.thunkable.com/copy/e6c4740955a6b419b79baa0f6fa07ffd)  
(See first screen)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/0/30b9b0c54c2e0e032287295e177174db63f4d4ad.png)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/e/9ebd28d93f7379b2aa6eedb7f1ff99dae5b5bc6d.png)

I had to set the top margin of the button to -6 pixels (negative six) to achieve the overlap title effect. The advantage of a layout is that you can also create a custom Data Viewer List layout from it.

**Modified image file** (I made the area behind the gap in the border transparent instead of white):

![Asset 3](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/d/bd2d5c4a9c305fcef816f3442162d2a7f0c0fb08.png)

---

<div class="post-metadata">

### Author: ![steve\_synopsis](https://avatars.discourse-cdn.com/v4/letter/s/48db29/32.png) [@steve\_synopsis](https://community.thunkable.com/u/steve_synopsis)
#### Post date: [December 3, 2024, 12:43pm UTC](https://community.thunkable.com/t/can-i-create-this-type-of-effect-in-thunkable/3376517/5 "2024-12-03T12:43:34Z")

</div>

Thanks. Much appreciated!

---

<div class="post-metadata">

### Author: ![matt\_conroy](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/matt_conroy/32/150843_2.png) [@matt\_conroy](https://community.thunkable.com/u/matt_conroy)
#### Post date: [December 3, 2024, 2:56pm UTC](https://community.thunkable.com/t/can-i-create-this-type-of-effect-in-thunkable/3376517/6 "2024-12-03T14:56:29Z")

</div>

@tatiang Brilliant work! 🙌

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)
#### Post date: [March 3, 2025, 2:57pm UTC](https://community.thunkable.com/t/can-i-create-this-type-of-effect-in-thunkable/3376517/7 "2025-03-03T14:57:18Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.