VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-borders/

⇱ Bootstrap 5 Borders - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Borders

Last Updated : 23 Jul, 2025

Bootstrap 5 Borders offer predefined border styles to elements. Classes like .border, .border-0, .border-top, .border-bottom, .border-left, and .border-right provide easy customization for borders, including color, width, and radius, enhancing UI design.

Bootstrap 5 Borders:

PropertyDescription
BorderClassifies into additive and subtractive. Additive adds borders, subtractive removes.
Border ColorUtilizes theme colors to change border color.
Border WidthIncreases or decreases border width.
Border RadiusUtilizes rounded classes for rounded corners.
SassSupports language extensions like variables, utility API, and mixins.

Examples of Bootstrap 5 Borders

Example 1: This code demonstrates the different border sizes as shown below. The class "border border-4" means "border-4" size is applied to all the sides and so on.

Output:

👁 Boot-border
Bootstrap 5 Borders Example Output


Example 2: This code demonstrates different border colors using the relevant classes.

Output:

👁 Boot-border-2
Bootstrap 5 Borders Example Output

Reference: https://getbootstrap.com/docs/5.0/utilities/borders/

Comment

Explore