Rounded image or border-radius 100%?

Question

I have a question about rounded elements on page. For example I have a small logo which isn't rounded and I want to put it on rounded background (120x120). Is it better to make div like this:

border-radius: 100%;
background-color: red;
background-image: url('logo.png');
background-position: center;

or just create an image in for eg. Gimp?

Answer 1

If you are going to be using the logo on a rounded background in future (e.g. Leaflets, email etc.) it may be easier to create a version of the logo in gimp or alternative, so it can be used anywhere very quickly.

If not it is really just personal preference, each has advantages and disadvantages.

border-radius solution

• you can remove the background on some screens if you want to with media queries
• quicker to achieve.
• background size, color and radius can easily be changed at a later stage.
• radius stays high quality/ resolution on any display.

image solution

• better browser support.
• Useable in future publications.