Skip to content

docs: improve border radius size examples - #43206

Open
Aryan9891 wants to merge 1 commit into
twbs:mainfrom
Aryan9891:fix/border-radius-docs-43034
Open

Aryan9891 wants to merge 1 commit into
twbs:mainfrom
Aryan9891:fix/border-radius-docs-43034

Conversation

@Aryan9891

Copy link
Copy Markdown

Fixes #43034

Motivation & Context

In the v6 documentation for border-radius sizes, the placeholders were light gray on white (or dark gray on darker gray in dark mode), making the curvature of the border radius difficult to see. Additionally, the size examples displayed generic 75x75 dimension text rather than descriptive class labels.

Description

  • Rectangular Placeholders: Updated the numeric size examples (rounded-0 through rounded-9) to rectangular placeholders (width="100" height="75"), maintaining a consistent 75px height alongside square circles (75x75) and pills (150x75).
  • Class Name Labels: Replaced generic 75x75 dimension text with explicit class name labels (text="rounded-0", ..., text="rounded-9", text="circle", text="rounded-pill").
  • Enhanced Contrast: Added scoped styling in site/src/scss/_placeholder-img.scss for .bd-example-rounded-utils using light-dark() with --bs-gray-300 / --bs-gray-700 fills and --bs-gray-800 / --bs-gray-200 text so the border radius effect stands out cleanly in both light and dark color modes.
  • Adjusted placeholder font size to 0.875rem for crisp label rendering inside the examples.

@Aryan9891
Aryan9891 requested a review from a team as a code owner October 26, 2026 12:29
@julien-deramond julien-deramond added v6 v6, the main branch accessibility Keyboard, screen readers, contrast, ARIA docs Documentation site and its content html Component markup: elements, attributes, structure labels Oct 26, 2026
@Aryan9891
Aryan9891 force-pushed the fix/border-radius-docs-43034 branch 6 times, most recently from 4f26a69 to a968537 Compare October 31, 2026 09:25
Signed-off-by: Aryan Sachin <aryansachinixd@gmail.com>
@Aryan9891
Aryan9891 force-pushed the fix/border-radius-docs-43034 branch from a968537 to b1eea76 Compare November 1, 2026 07:21

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility Keyboard, screen readers, contrast, ARIA docs Documentation site and its content html Component markup: elements, attributes, structure v6 v6, the main branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

v6 docs: border radius/size examples could be improved

2 participants