Rounded and Circle Images

Rounded Images

Use .rounded for slightly rounded corners or .rounded-circle for circular avatar images.

Example

<img src="avatar.jpg" class="rounded" alt="Rounded" width="100">
<img src="avatar.jpg" class="rounded-circle" alt="Avatar" width="100">
<img src="avatar.jpg" class="rounded-pill" alt="Pill" width="200" height="100">

HTML

Full Editor

Pro Tip

For a perfect circle, the image must be square (equal width and height).

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned