How do I create a circle or square with just CSS - with a hollow center?

Question

It should just basically be an outline of the square or circle - that I can style accordingly (i.e. change the color to whatever I want, change the thickness of the border,

Answer 1

If you want your div to keep it's circular shape even if you change its width/height (using js for instance) set the radius to 50%. Example: css:

.circle {
    border-radius: 50%/50%; 
    width: 50px;
    height: 50px;
    background: black;
}

html:

<div class="circle"></div>

Answer 2

i don't know of a simple css(2.1 standard)-only solution for circles, but for squares you can do easily:

.squared {
    border: 2x solid black;
}

then, use the following html code:

<img src="…" alt="an image " class="squared" />