Notes:

Bootstrap - Rounded corners related classes:

rounded:
- 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 i.e. 4 pixels

rounded-top:
- sets the 4 pixels border radius on top left and top right corners of an html element
- rounds top left and top right corners of an html element by 0.25rem i.e. 4 pixels

rounded-right:
- sets the 4 pixels border radius on top right and bottom right corners of an html element
- rounds top right and bottom right corners of an html element by 0.25rem i.e. 4 pixels

rounded-bottom:
- sets the 4 pixels border radius on 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.e. 4 pixels

rounded-left:
- sets the 4 pixels border radius on bottom left and top left corners of an html element
- rounds bottom left and top left corners of an html element by 0.25rem i.e. 4 pixels

rounded-circle:
- sets the 50% border radius on all corners of an html element
- use it to display an html element in circle or oval shape

rounded-0:
- sets the 0px border radius on all corners of an html element
- use it to remove rounded corners of an html element

Example Code:

<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-bottom">
</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-circle">
</div>

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

<div style="width:100px; height:100px; border-radius:50%;" class="bg-primary m-1">
</div>

<div style="width:100px; height:100px; border-top-left-radius:50%;" class="bg-primary m-1">
</div>

<div style="width:100px; height:100px; border-top-right-radius:50%;" class="bg-primary m-1">
</div>

<div style="width:100px; height:100px; border-top-left-radius:50%; border-bottom-right-radius:50%;" class="bg-primary m-1">
</div>

Interview Questions: