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.
Can you share a sample project? I’m sure we’ll be able to take a look and fix it up for you!
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.
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:
const borderClasses = `border-l-${borderWidth} border-r-${borderWidth} border-b-${borderWidth} border-t-${borderWidth} border-solid border-${borderColor} ${borderRadius}`;
To this:
const borderClasses = `{{borderWidth}} border-solid border-${borderColor} ${borderRadius}`;
That will fix the issue for you 
P.S. Wondering if should I change my name to DanGPT 
1 Like