How to color the background within the square HTML shape entity?

Using HTML I want to create a square inline with a black border and green background. I have been using the square shape entity in HTML &#9633. The issue is when I use the background-color style it fills the entire div. How do I get this shape with a black border and green just within the shape?

Below is what I have tried, but it ends up with coloring the entire div as green. Would love just to work with the shape and specify the coloring of the background only.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<div style="font-size:60px;background-color:#388004;">□</div>

<!-- end snippet -->

Your current code.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-html -->

<div style="font-size:60px;background-color:#388004;">□</div>

<!-- end snippet -->

If my understanding is correct, you want a box or square with black border and filled with green color.

I don't know if this could help you, but if that so...
Make another div that will fill the your □ or box and remove the background-color in the parent div.

Using a static css, you can do like this.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-html -->

<div style="position:relative;font-size:60px;">
  <div style="position:absolute;top:30px;left:6px;width:23.5px;height:23.5px;background-color:#388004;"></div>
  □
</div>

<!-- end snippet -->

But, if you just want a box with black border filled with green color and this □ is not required, you can actually do it with just one div by setting up it's border.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-html -->

<div style="border:2px solid black;width:23px;height:23px;background-color:#388004;"></div>

<!-- end snippet -->