You can make a class and specify a border-radius for img-child-elements.

Then you can surround the image files you would normally use like this:
with divs, making it:
<div class="characterPortrait">[[File:Image.png]]</div>

The CSS code would look something like

.characterPortrait img {
    border-radius: 30px;

But you would have to play around with the sizes yourself to make them circles. I haven't tested, but maybe using a way too big radius might make them fully rounded. (Do we still need toolkit specific prefixes like moz and webkit for this to work?)

But if you are unsure if you really need CSS, just round the corners using software like The GIMP.

Community content is available under CC-BY-SA unless otherwise noted.