我如何使div即使具有border-radius设置也能获得正方形边框

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>