Actually, this is the question. The border has a border-radius. In outline, there is no such property (or rather, for FF there is -moz-outline-radius, but this does not work in other browsers).

div { width: 100px; height: 100px; border: 2px solid red; border-radius: 20px; outline: 2px solid green; } 
 <div></div>

  • developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius - Qwertiy ♦
  • How to round the outline I do not know, but I think that it is impossible. You can use box-shadow: 0 0 0 2px green. - Music Sergey
  • @ Music Sergey, with a box-shadow everyone can)) I thought, suddenly there is some kind of life hacking with outline'm - humster_spb
  • caniuse.com/#search=outline-radius sometimes helps to find out if it is possible or not - Shnur
  • @Shnur, this resource helps to find out if a particular property will work in a particular browser. How to round the corners of the outline is not written there, alas - humster_spb

0