# Invisible Top border

**URL:** <https://forums.realmacsoftware.com/t/invisible-top-border/45764>\
**Category:** RapidWeaver Elements\
**Created:** [December 29, 2024, 11:37am UTC](https://forums.realmacsoftware.com/t/invisible-top-border/45764 "2024-12-29T11:37:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\
**Post date:** [December 29, 2024, 11:37am UTC](https://forums.realmacsoftware.com/t/invisible-top-border/45764/1 "2024-12-29T11:37:27Z")

</div>

I have a custom component with a property to set the border thickness. All the edges are displayed correctly except for the top border, which is not visible. Neither ChatGPT, Claude, Cursor, nor Windsurf have been able to resolve the issue.

 ![Scherm­afbeelding 2024-12-29 om 12.36.18](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/0/00206fb91eae5fbaaca0856c45def1adbd40a560.png)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [December 29, 2024, 12:19pm UTC](https://forums.realmacsoftware.com/t/invisible-top-border/45764/2 "2024-12-29T12:19:06Z")

</div>

Can you share a sample project? I’m sure we’ll be able to take a look and fix it up for you!

---

<div class="post-metadata">

**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\
**Post date:** [December 29, 2024, 3:59pm UTC](https://forums.realmacsoftware.com/t/invisible-top-border/45764/3 "2024-12-29T15:59:38Z")

</div>

Hi @dan : I have emailed you the project because certain IDs are required to visualize it. Without these, you will only see a generic text string.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [December 29, 2024, 9:38pm UTC](https://forums.realmacsoftware.com/t/invisible-top-border/45764/4 "2024-12-29T21:38:30Z")

</div>

I’ve taken a look at your code, and found the issue.

It’s essentially because you’re trying to hard code each side of the border, you only need to write out {{borderWidth}}, and not all the classes (as we generate them for the border control).

The issue is on line 76, **change it from this:**

```auto
  const borderClasses = `border-l-${borderWidth} border-r-${borderWidth} border-b-${borderWidth} border-t-${borderWidth} border-solid border-${borderColor} ${borderRadius}`;

```

 ![CleanShot 2024-12-29 at 9 .31.29@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/c/aceefc114e6480f6d94702589fe7b9a05aa2f06f.png)

**To this:**

```auto
const borderClasses = `{{borderWidth}} border-solid border-${borderColor} ${borderRadius}`;

```

 ![CleanShot 2024-12-29 at 9 .31.54@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/c/7c5e34d1543cbc60bf3fed8d4eb4f0ab7896db89.png)

That will fix the issue for you ☺

_P.S. Wondering if should I change my name to DanGPT 🤣_