How can I make div to get square border even though it has border-radius setting

Question

Now I am working on HTML page.

And I made div with 'border-radius: 150px', so this div has radius border.

But I need to give this div square border. Of course not only exact border, maybe similar thing like border is ok.

But I don't know how can I do this. Please let me know.

Thank you.

EDIT

Now I found that outline is not same working for Chrome and Firefox. In Chrome outline is only for itself area, but in Firefox outline is for area including it's children dom nodes. Now I want to make Firefox as same as Chrome's outline action. How can I do this in Firefox.

Answer 1

Hope this is what you are looking for.

:)

 div { background: red; width: 300px; height: 300px; border-radius: 150px; outline: 5px solid green; } 

 <div></div>