Place a thin border around inline-tabs to better separate them

[sirosen]

I appreciate the drive for minimal styling, but I've seen inline tabs look "strange" in some cases because the bottom border of the headings looks like an hrule across the content area. When trying to use tabs inside of autoclass method docs, it can look like the tab content is associated with the following method.

I think furo could make tabs look consistent in a wider range of contexts by putting a border (it can be razor-thin, maybe 1px) around the tab group.

I'm happy to help contribute this change if it sounds desirable.
In the meantime, I'm going to play around to figure out how to do this myself with some custom styling.

---

Update: I found some styling that I liked, just adding the following

:root {
  /* default to '#aaa', which looks okay in both light and dark */
  --tabset-border-color: #aaa;
}
/* set the border color to decrease contrast a little on dark theme
 * this detection logic is taken from furo, which sets data-theme on the body
 * element when the user toggles the color scheme */
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --tabset-border-color: #777;
  }
}
.tab-set.container {
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  border-color: var(--tabset-border-color);
}

[pradyunsg]

Glad you found something you like. I don't think every stylistic preference can be catered to in web design, so let's call this as one where you and I have different preferences. :)

[sirosen]

Sure, works for me! I thought it might be a common problem, but there aren't a bunch of upvotes or comments here, so I guess not.

Thanks as always for maintaining furo! Including making the decisions to say no to some things. 🙂