[BUG] - Use outline instead borders for inputs...

[alyiev]

HeroUI Version

2.8.5

Describe the bug

If a container has a padding with an input inside that gets focus its border goes beyond parent container that creates unexpected result...

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create a div container.
2. Add padding to the div container.
3. Create and insert a from element to the container.
4. Insert an input inside the form.
5. Focus on the input.
6. See the bug

Expected behavior

Padding doesn't affect on any state of any element in any level of nesting

Screenshots or Videos

Operating System Version

macOs

Browser

Chrome

[VaideshWaranR]

Can you assign the task to me? I'm interested to resolve the bug.

[hasegawa-101]

Hi @alyiev,

I've investigated this behavior and would like to clarify a few things. I created a reproduction in Storybook following your exact steps (container with padding → form → input), but I wasn't able to reproduce the border bleeding beyond the parent padding in the default case.

However, I noticed this issue can occur when the parent container or form element has overflow: hidden applied. Could you check if any of your parent elements have this CSS property set?

Technical background:

• HeroUI's bordered and faded variants use border for the visual border (which is the correct approach for decorative borders)
• Focus rings use outline (which doesn't affect layout and can render outside the element)
• The border property is part of the box model and should respect parent padding unless overflow: hidden clips it

Could you please provide:

1. A CodeSandbox or minimal reproduction that shows the issue?
2. Any custom CSS you're applying to the container, form, or input elements?
3. Screenshots of the browser DevTools showing the computed styles of the affected elements?

This will help us determine if this is a bug in HeroUI or a CSS configuration issue. Thank you!

[wingkwong]

closing due to inactivity