Add Utility Class for Rounded Borders

[AbdellahBoutmad]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the contributing guidelines

Proposal

Add a utility class like .rounded-border that applies a border-radius of 4px by default. You could also include variations for different border-radius values, such as .rounded-border-sm, .rounded-border-md, and .rounded-border-lg. `Example Usage:

This element has a rounded border.

`

Motivation and context

In modern web development, rapid prototyping and consistency in UI design are crucial. Currently, to apply rounded borders to elements in Bootstrap, developers need to write custom CSS, which can be time-consuming and inconsistent. This approach also adds to the CSS bloat and can lead to redundancy across different projects.

Benefits of Adding a Utility Class for Rounded Borders:

Efficiency: Developers can quickly apply rounded borders without writing additional CSS, speeding up development time. Consistency: A predefined utility class ensures consistent styling across different elements and projects. Reduced CSS Bloat: By using utility classes instead of custom CSS for every instance, the overall CSS size can be reduced. Simplified Maintenance: Updating or changing border-radius values would be easier and more maintainable with utility classes. Problems This Change May Help Solve:

Inconsistency: Custom CSS for rounded borders can lead to inconsistent styles if not properly managed. A utility class provides a standardized approach. Development Speed: Writing custom CSS for every element with rounded borders is inefficient. Utility classes streamline this process. CSS Bloat: Custom CSS can add unnecessary bulk to stylesheets. Utility classes help keep the CSS lean and focused. By incorporating a utility class like .rounded-border with variations, Bootstrap can offer more flexibility and ease of use for developers, enhancing both productivity and design consistency.

[crftwrk]

https://getbootstrap.com/docs/5.3/utilities/borders/#radius

[omishah]

Looks like you haven't gone through docs yet! rounded classes ( rounded, rounded-1, rounded-2, ..., rounded-5 ) have been from quite long time.

[louismaximepiton]

Yes, just as it was said before, the documentation indicates that the 4px border-radius is equivalent to .rounded-1