Básicamente, debería ser un contorno del cuadrado o círculo, que puedo diseñar en consecuencia (es decir, cambiar el color a lo que quiera, cambiar el grosor del borde, etc.)

Me gustaría aplicar ese círculo o cuadrado sobre otra cosa (como una imagen o algo) y la parte central debe estar ahuecada, para que pueda ver la imagen debajo del cuadrado o círculo.

Preferiría que fuera principalmente CSS + HTML.