Responsive Border Radius built with Bootstrap 5. Use border radius to define the radius of the element's corners. This component gives you an ability to add rounded corners to elements.

Check out [Bootstrap Border Radius Documentation](https://mdbootstrap.com/docs/standard/extended/border-radius/) for detailed instructions & even more examples.

## Basic example

![Bootstrap 5 Overlay](/assets/basic.png)

```html
<span class="square bg-primary rounded"></span>
<span class="square bg-primary rounded-top"></span>
<span class="square bg-primary rounded-end"></span>
<span class="square bg-primary rounded-bottom"></span>
<span class="square bg-primary rounded-start"></span>
<span class="square bg-primary rounded-pill" style="width: 150px"></span>
<span class="square bg-primary rounded-0"></span>
```

## How to use?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples

[Bootstrap Border Radius Sizes:
![Bootstrap 5 Border Radius](/assets/size.png)](https://mdbootstrap.com/docs/standard/extended/border-radius/#section-border-radius-sizes)

[Bootstrap Border Radius Circle:
![Bootstrap 5 Border Radius](/assets/circle.png)](https://mdbootstrap.com/docs/standard/extended/border-radius/#section-border-radius-circle)

[Bootstrap Border Radius 0:
![Bootstrap 5 Border Radius](/assets/border-0.png)](https://mdbootstrap.com/docs/standard/extended/border-radius/#section-border-radius-0)

[Bootstrap Border Radius Rounded:
![Bootstrap 5 Border Radius](/assets/rounded.png)](https://mdbootstrap.com/docs/standard/extended/border-radius/#section-border-radius-rounded)

[Bootstrap Border Radius Top:
![Bootstrap 5 Border Radius](/assets/top.png)](https://mdbootstrap.com/docs/standard/extended/border-radius/#section-border-radius-top)

[Bootstrap Border Radius Bottom:
![Bootstrap 5 Border Radius](/assets/bottom.png)](https://mdbootstrap.com/docs/standard/extended/border-radius/#section-border-radius-bottom)

[Bootstrap Border Radius Sizes Image:
![Bootstrap 5 Border Radius](/assets/size.png)](https://mdbootstrap.com/docs/standard/extended/border-radius/#section-border-radius-on-just-one-image)

___

## More extended Bootstrap documentation

<ul>
<li><a href="https://mdbootstrap.com/docs/standard/extended/avatar/">Bootstrap avatar</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/profiles/">Bootstrap profiles</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/utilities/borders/">Bootstrap borders</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/content-styles/colors/">Bootstrap colors</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/components/buttons/">Bootstrap buttons</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/content-styles/images/">Bootstrap images</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/data/tables/">Bootstrap tables</a></li>
</ul>