Suggestion: Add `border-radius` property to `hX:target` selectors

[lumirlumir]

What problem do you want to solve?

Hello, I noticed that when clicking the link button next to headings, the background-color changes, as shown in the screenshot below.

However, I found that the border-radius for the hX:target selectors are not set to var(--border-radius);. This causes inconsistency in the visualization, as seen in the following screenshot.

What do you think is the correct solution?

I suggest adding a border-radius: var(--border-radius); property to the hX:target selectors to enhance visual consistency.

Here’s a preview of the changes:

• Before
  

• After
  

Participation

• I am willing to submit a pull request for this change.

Additional comments

I think adding a bit more top and bottom padding or margin could improve the UI. Just my opinion—feel free to take it into consideration!

[Tanujkanti4441]

Hi @lumirlumir, thanks for the issue, the idea seems good to me, let's take some more feedback from @eslint/website-team.

[nzakas]

Just a note that this would have to be done in the eslint repo because that's where the docs live.

[harish-sethuraman]

Feel free to send a PR. The rounded corners are fine. I'm unsure how the margins and padding would look (if it will look better with existing UI) so would like other's feedback as well.