Round Image

Placeholder Picture
Placeholder Picture

Round Images

The procedure is the same in all the frameworks.
You start with a square image. Add it to the canvas, and give it a corner radius of at least half of one side. The maximum size you can use is 500px. If the programme gets % added as a unit in future, then you can use 50%.

Optional: A border and drop shadow will look nice, and they can be added as enhancements. Instead of using a border, the class .thumbnail can be used.

Don’t: Never use padding with round images, that will break the design. If some space is necessary, use margins.

Placeholder Picture

Download this component