How to Use Rounded Classes in Bootstap

Bootstrap Rounded Corners

Learn bootstrap rounded corners. There are more than 6 rounded classes available in bootstrap.

Types of rounded classes

Rounded

  • It Sets the 4 pixels (i.e. 0.25 rem) border-radius on all corners of an HTML element
  • Rounds all corners of an HTML element by 0.25rem ie. 4 pixels

Rounded-top:

  • It Sets the 4 pixels’ border-radius on the top left and top right corners of an HTML element
  • Rounds the top left and top right corners of an HTML element by 0.25rem i.e. 4 pixels

Rounded-right

  • It Sets the 4 pixels’ border-radius on the top right and bottom right corners of an HTML element
  • Rounds the top right and bottom right corners of an HTML element by 0.25rem i.e. 4 pixels

Rounded-bottom

  • It Sets the 4 pixels’ border-radius on the bottom left and bottom right corners of an HTML element
  • Rounds bottom left and bottom right corners of an HTML element by 0.25rem i. 4 pixels

Rounded-left

  • It Sets the 4 pixels’ border-radius on the bottom left and bottom right corners of an HTML element
  • Rounds bottom left and bottom right corners of an HTML element by 0.25rem i. 4 pixels

Rounded-circle

  • It Sets the 50% border radius on all corners of an HTML element
  • Use it to display an HTML element in a circle or oval shape

Example:

<div style="width:100px; height: 100px;" class="bg-primary m-1 rounded"></div>
<div style="width:100px; height: 100px;" class="bg-primary m-1 rounded-top"></div>
<div style="width:100px; height: 100px;" class="bg-primary m-1 rounded-right"></div>
<div style="width:100px; height: 100px;" class="bg-primary m-1 rounded-left"></div>
<div style="width:100px; height: 100px;" class="bg-primary m-1 rounded-bottom"></div>
<div style="width:100px; height: 100px;" class="bg-primary m-1 rounded-circle"></div>

Output:

bootstrap rounded corners

Leave a Reply