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 .thumbnailcan be used.
Don’t: Never use padding with round images, that will break the design. If some space is necessary, use margins.
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.
Download this component