Borders

React Bootstrap 5 Borders component

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Basic examples

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Additive

        
            
            import React from 'react';
              
            export default function App() {
              return (
                <>       
                  <span className="square border"></span>
                  <span className="square border-top"></span>
                  <span className="square border-end"></span>
                  <span className="square border-bottom"></span>
                  <span className="square border-start"></span>
                </>
              );
            }

Subtractive

        
            
            import React from 'react';
                    
            export default function App() {
              return (
                <>       
                  <span className="square border border-0"></span>
                  <span className="square border border-top-0"></span>
                  <span className="square border border-end-0"></span>
                  <span className="square border border-bottom-0"></span>
                  <span className="square border border-start-0"></span>
                </>
              );
            }

Color

Change the border color using utilities built on our theme colors.

        
            
            import React from 'react';
                    
            export default function App() {
              return (
                <>       
                  <span className="square border border-primary"></span>
                  <span className="square border border-secondary"></span>
                  <span className="square border border-success"></span>
                  <span className="square border border-danger"></span>
                  <span className="square border border-warning"></span>
                  <span className="square border border-info"></span>
                  <span className="square border border-light"></span>
                  <span className="square border border-dark"></span>
                  <span className="square border border-white"></span>
                </>
              );
            }

Border-width

Change the border width.

        
            
            import React from 'react';
                    
            export default function App() {
              return (
                <>       
                  <span className="square border border-1"></span>
                  <span className="square border border-2"></span>
                  <span className="square border border-3"></span>
                  <span className="square border border-4"></span>
                  <span className="square border border-5"></span>
                </>
              );
            }

Border-radius

Add classes to an element to easily round its corners.

        
            
            import React from 'react';
                
            export default function App() {
              return (
                <>       
                  <span className="square bg-primary rounded"></span>
                  <span className="square bg-primary rounded-top"></span>
                  <span className="square bg-primary rounded-end"></span>
                  <span className="square bg-primary rounded-bottom"></span>
                  <span className="square bg-primary rounded-start"></span>
                  <span className="square bg-primary rounded-circle"></span>
                  <span className="square bg-primary rounded-pill" style={{width: "150px"}}></span>
                  <span className="square bg-primary rounded-0"></span>
                </>
              );
            }

Sizes

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 3, and can be configured by modifying the utilities API. 

        
            
              import React from 'react';
              
              export default function App() {
                return (
                  <>       
                    <span className="square bg-primary rounded-0"></span>
                    <span className="square bg-primary rounded-1"></span>
                    <span className="square bg-primary rounded-2"></span>
                    <span className="square bg-primary rounded-3"></span>
                    <span className="square bg-primary rounded-4"></span>
                    <span className="square bg-primary rounded-5"></span>
                    <span className="square bg-primary rounded-6"></span>
                    <span className="square bg-primary rounded-7"></span>
                    <span className="square bg-primary rounded-8"></span>
                    <span className="square bg-primary rounded-9"></span>
                  </>
                );
              }