2

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.

LarAng
  • 1,255
  • 3
  • 18
  • 28
  • 1
    `outline`...try that. – Paulie_D Feb 12 '18 at 17:27
  • Why are you using border-radius - what do you want that property to do on your div? I ask this because `border-radius` tells the div to have rounded borders. Maybe you are using the wrong property, thinking border-radius does something else ? – cssyphus Feb 12 '18 at 17:28
  • @gibberish, i am using border-radius, because i have to give background and so on to div. thanks – LarAng Feb 12 '18 at 17:36
  • If you do not need rounded corners, you do not need border-radius. Take that setting out. Or, tell us why you are using border-radius. – cssyphus Feb 12 '18 at 17:38
  • @Paulie_D, thanks, that's just answer. it works well. – LarAng Feb 12 '18 at 17:40
  • Now I found new problem, please look at my new Edit and please let me know, Thanks. – LarAng Mar 07 '18 at 20:10

1 Answers1

6

Hope this is what you are looking for.

:)

div {
  background: red;
  width: 300px;
  height: 300px;
  border-radius: 150px;
  outline: 5px solid green;
}
<div></div>
Gerardo BLANCO
  • 5,590
  • 1
  • 16
  • 35
  • please look my new Edit and please let me know, thanks! – LarAng Mar 07 '18 at 20:06
  • Sorry, i see no diference between chrome and mozilla. Can you maybe make a new question so everyone can help. And comment the link here so i can go and help you – Gerardo BLANCO Mar 08 '18 at 02:44
  • if there is any descendant element out of itself area(maybe position: absolute), then you can see difference of outline. Chrome's outline is only for itself area, even though descendant element is outside. But Firefox's outline is for area including descendant element. – LarAng Mar 08 '18 at 04:22
  • I am not able to reproduce what you are referring to. If you have a new question, please ask it by clicking the [Ask Question](http://stackoverflow/questions/ask) button; you may want to include a link to this one for context. – Gerardo BLANCO Mar 08 '18 at 04:32
  • I asked new question, you can see what i mean - https://stackoverflow.com/questions/49165863/firefox-outline-css-property-works-different-than-chrome – LarAng Mar 08 '18 at 05:14