Outline radius

Question

Is there anyway of getting rounded corners on the outline of a div element  similar to border-radius

User · Answer

I usually accomplish this using the  after pseudo-element   of course it depends on usage  this method allows control over individual borders  rather than using the hard shadow method    you could also set -1px offsets and use a background linear gradient  no border  for a different effect once again    x000D   x000D  body   x000D    margin  20px  x000D    x000D   x000D  a   x000D    background   999  x000D    padding  10px 20px  x000D    border-radius  5px  x000D    text-decoration  none  x000D    color   fff  x000D    position  relative  x000D    border  2px solid  000  x000D    x000D   x000D  a after   x000D    content      x000D    display  block  x000D    position  absolute  x000D    top  0  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    border-radius  5px  x000D    border  2px solid  ccc  x000D    x000D   lt a href     gt Button lt  a gt  x000D   x000D   x000D

User · Answer

COMBINING BOX SHADOW AND OUTLINE   A slight twist on Lea Hayes answer I found   input type text  focus       box-shadow  0 0 0 1pt red      outline-width  1px      outline-color  red      gets a really nice clean finish  No jumping in size which you get when using border-radius

User · Answer

As others have said  only firefox supports this  Here is a work around that does the same thing  and even works with dashed outlines       x000D   x000D   has-outline   x000D      display  inline-block  x000D      background   51ab9f  x000D      border-radius  10px  x000D      padding  5px  x000D      position  relative  x000D    x000D   has-outline after   x000D    border-radius  10px  x000D    padding  5px  x000D    border  2px dashed  9dd5cf  x000D    position  absolute  x000D    content      x000D    top  -2px  x000D    left  -2px  x000D    bottom  -2px  x000D    right  -2px  x000D    x000D   lt div class  has-outline  gt  x000D    I can haz outline x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The simple answer to the basic question is no  The only cross-browser option is to create a hack that accomplishes what you want  This approach does carry with it certain potential issues when it comes to styling pre-existing content  but it provides for more customization of the outline  offset  width  line style  than many of the other solutions   On a basic level  consider the following static example  run the snippent for demo     x000D   x000D   outline   x000D      border  2px dotted transparent  x000D      border-radius  5px  x000D      display  inline-block  x000D      padding  2px  x000D      margin  -4px  x000D    x000D   x000D      focus-within does not work in Edge or IE    x000D   outline focus-within   outline edge   x000D      border-color  blue  x000D    x000D   x000D  br   x000D      margin-bottom  0 75rem  x000D    x000D   lt h3 gt Javascript-Free Demo lt  h3 gt  x000D   lt div class  outline edge  gt  lt input type  text  placeholder  I always have an outline   gt  lt  div gt  lt br gt  lt div class  outline  gt  lt input type  text  placeholder  I have an outline when focused   gt  lt  div gt    lt i gt Doesn t work in Edge or IE lt  i gt  lt br gt  lt input type  text  placeholder  I have never have an outline    gt  x000D   lt p gt Note that the outline does not increase the spacing between the outlined input and other elements around it  The margin  -4px  compensates for the space that the outlines padding  -2px  and width  2px  take up  a total of 4px  lt  p gt  x000D   x000D   x000D    Now  on a more advanced level  it would be possible to use JavaScript to bootstrap elements of a given type or class so that they are wrapped inside a div that simulates an outline on page load  Furthermore  event bindings could be established to show or hide the outline on user interactions like this  run the snippet below or open in JSFiddle     x000D   x000D  h3   x000D    margin  0  x000D    x000D   x000D  div   x000D    box-sizing  border-box  x000D    x000D   x000D   flex   x000D    display  flex  x000D    x000D   x000D   clickable   x000D    cursor  pointer  x000D    x000D   x000D   box   x000D    background  red  x000D    border  1px solid black  x000D    border-radius  10px  x000D    height  5rem  x000D    display  flex  x000D    align-items  center  x000D    text-align  center  x000D    color  white  x000D    font-weight  bold  x000D    padding  0 5rem  x000D    margin  1rem  x000D    x000D   lt h3 gt Javascript-Enabled Demo lt  h3 gt  x000D   lt div class  flex  gt  x000D     lt div class  box outline-me  gt I m outlined because I contain lt br gt the  outline-me  class lt  div gt  x000D     lt div class  box clickable  gt Click me to toggle outline lt  div gt  x000D   lt  div gt  x000D   lt hr gt  x000D   lt input type  text  placeholder  I m outlined when focused    gt  x000D   x000D   lt script gt  x000D     Called on an element to wrap with an outline and passed a styleObject x000D     the styleObject can contain the following outline properties  x000D       style  width  color  offset  radius  bottomLeftRadius  x000D      bottomRightRadius  topLeftRadius  topRightRadius x000D     It then creates a new div with the properties specified and  x000D     moves the calling element into the div x000D     The newly created wrapper div receives the class  simulated-outline  x000D  Element prototype addOutline   function  styleObject  hideOutline   true    x000D      var element   this  x000D   x000D         create a div for simulating an outline x000D      var outline   document createElement  div    x000D   x000D         initialize css formatting x000D      var css    display inline-block    x000D   x000D         transfer any element margin to the outline div x000D      var margins     marginTop    marginBottom    marginLeft    marginRight    x000D      var marginPropertyNames      x000D          marginTop   margin-top   x000D          marginBottom   margin-bottom   x000D          marginLeft   margin-left   x000D          marginRight   margin-right  x000D        x000D      var outlineWidth   Number parseInt styleObject width   x000D      var outlineOffset   Number parseInt styleObject offset   x000D      for  var i   0  i  lt  margins length    i    x000D          var computedMargin   Number parseInt getComputedStyle element  margins i     x000D          var margin   computedMargin - outlineWidth - outlineOffset  x000D          css    marginPropertyNames margins i           margin    px    x000D        x000D      element style cssText     margin 0px  important    x000D       x000D         compute css border style for the outline div x000D      var keys   Object keys styleObject   x000D      for  var i   0  i  lt  keys length    i    x000D          var key   keys i   x000D          var value   styleObject key   x000D          switch  key    x000D              case  style   x000D                  var property    border-style   x000D                  break  x000D              case  width   x000D                  var property    border-width   x000D                  break  x000D              case  color   x000D                  var property    border-color   x000D                  break  x000D              case  offset   x000D                  var property    padding   x000D                  break  x000D              case  radius   x000D                  var property    border-radius   x000D                  break  x000D              case  bottomLeftRadius   x000D                  var property    border-bottom-left-radius   x000D                  break  x000D              case  bottomRightRadius   x000D                  var property    border-bottom-right-radius   x000D                  break  x000D              case  topLeftRadius   x000D                  var property    border-top-left-radius-style   x000D                  break  x000D              case  topRightRadius   x000D                  var property    border-top-right-radius   x000D                  break  x000D            x000D          css    property         value        x000D        x000D       x000D         apply the computed css to the outline div x000D      outline style cssText   css  x000D       x000D         add a class in case we want to do something with elements x000D         receiving a simulated outline x000D      outline classList add  simulated-outline    x000D       x000D         place the element inside the outline div x000D      var parent   element parentElement  x000D      parent insertBefore outline  element   x000D      outline appendChild element   x000D   x000D         determine whether outline should be hidden by default or not x000D      if  hideOutline  element hideOutline    x000D    x000D   x000D  Element prototype showOutline   function      x000D      var element   this  x000D         get a reference to the outline element that wraps this element x000D      var outline   element getOutline    x000D         show the outline if one exists x000D      if  outline  outline classList remove  hide-outline    x000D    x000D   x000D   x000D  Element prototype hideOutline   function      x000D      var element   this  x000D         get a reference to the outline element that wraps this element x000D      var outline   element getOutline    x000D         hide the outline if one exists x000D      if  outline  outline classList add  hide-outline    x000D    x000D   x000D     Determines if this element has an outline  If it does  it returns the outline x000D     element  If it doesn t have one  return null  x000D  Element prototype getOutline   function     x000D      var element   this  x000D      var parent   element parentElement  x000D      return  parent classList contains  simulated-outline      parent   null  x000D    x000D   x000D     Determines the visiblity status of the outline  returning true if the outline is x000D     visible and false if it is not  If the element has no outline  null is returned  x000D  Element prototype outlineStatus   function     x000D      var element   this  x000D      var outline   element getOutline    x000D      if  outline     null    x000D          return null  x000D        else   x000D          return  outline classList contains  hide-outline    x000D        x000D    x000D   x000D     this embeds a style element in the document head for handling outline visibility x000D  var embeddedStyle   document querySelector   outline-styles    x000D  if   embeddedStyle    x000D      var style   document createElement  style    x000D      style innerText     x000D           simulated-outline hide-outline   x000D              border-color  transparent  important  x000D            x000D         x000D      document head append style   x000D    x000D   x000D   x000D                               example usage                              x000D   x000D     add outline to all elements with  outline-me  class x000D  var outlineMeStyle     x000D      style   dashed   x000D      width   3px   x000D      color   blue   x000D      offset   2px   x000D      radius   5px  x000D     x000D  document querySelectorAll   outline-me   forEach  element   gt   x000D    element addOutline outlineMeStyle  false   x000D      x000D   x000D   x000D     make clickable divs get outlines x000D  var outlineStyle     x000D      style   double   x000D      width   4px   x000D      offset   3px   x000D      color   red   x000D      radius   10px  x000D     x000D  document querySelectorAll   clickable   forEach  element   gt   x000D      element addOutline outlineStyle   x000D      element addEventListener  click    evt   gt   x000D          var element   evt target  x000D           element outlineStatus      element hideOutline     element showOutline    x000D          x000D      x000D   x000D   x000D     configure inputs to only have outline on focus x000D  document querySelectorAll  input   forEach  input   gt   x000D      var outlineStyle     x000D          width   2px   x000D          offset   2px   x000D          color   black   x000D          style   dotted   x000D          radius   10px  x000D        x000D      input addOutline outlineStyle   x000D      input addEventListener  focus    evt   gt   x000D          var input   evt target  x000D          input showOutline    x000D          x000D      input addEventListener  blur    evt   gt   x000D          var input   evt target  x000D          input hideOutline    x000D          x000D      x000D   lt  script gt  x000D   x000D   x000D    In closing  let me reiterate  that implementing this approach may require more styling than what I have included in my demos  especially if you have already styled the element you want outlined

User · Answer

There is the solution if you need only outline without border  It s not mine  I got if from Bootstrap css file  If you specify outline  1px auto certain color  you ll get thin outer line around div of certain color  In this case the specified width has no matter  even if you specify 10 px width  anyway it will be thin line  The key word in mentioned rule is  auto   If you need outline with rounded corners and certain width  you may add css rule on border with needed width and same color  It makes outline thicker

User · Answer

Similar to Lea Hayes above  but here s how I did it    x000D   x000D  div   x000D    background   999  x000D    height  100px  x000D    width  200px  x000D    border   999 solid 1px  x000D    border-radius  10px  x000D    margin  15px  x000D    box-shadow  0px 0px 0px 1px  fff inset  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D    No nesting of DIVs or jQuery necessary  Altho for brevity I have left out the -moz and -webkit variants of some of the CSS  You can see the result above

User · Answer

I wanted some nice focus accessibility for dropdown menus in a Bootstrap navbar  and was pretty happy with this    x000D   x000D       a dropdown-toggle focus   x000D           display  inline-block  x000D           box-shadow  0 0 0 2px  88b8ff  x000D           border-radius  2px  x000D         x000D   lt a href  https   stackoverflow com  class  dropdown-toggle  gt Visit Stackoverflow lt  a gt  x000D   x000D   x000D

User · Answer

If you want to get an embossed look you could do something like the following    x000D   x000D   embossed   x000D    background   e5e5e5  x000D    height  100px  x000D    width  200px  x000D    border   FFFFFF solid 1px  x000D    outline   d0d0d0 solid 1px  x000D    margin  15px  x000D    x000D   x000D   border-radius   x000D    border-radius  20px 20px 20px 20px  x000D    -webkit-border-radius  20px  x000D    -moz-border-radius  20px  x000D    -khtml-border-radius  20px  x000D    x000D   x000D   outline-radius   x000D    -moz-outline-radius  21px  x000D    x000D   lt div class  embossed  gt  lt  div gt  x000D   lt div class  embossed border-radius  gt  lt  div gt  x000D   lt div class  embossed border-radius outline-radius  gt -MOZ ONLY lt  div gt  x000D   x000D   x000D    I have not found a work around to have this work in other browsers   EDIT  The only other way you can do this is to use box-shadow  but then this wont work if you already have a box shadow on that element

User · Answer

You re looking for something like this  I think  div       -webkit-border-radius  10px      -moz-border-radius  10px      border-radius  10px      border  1px solid black      background-color   CCC      height  100px      width  160px      Edit There is a Firefox-only -moz-outline-radius properly  but that won t work on IE Chrome Safari Opera etc  So  it looks like the most cross-browser-compatible way  to get a curved line around a border is to use a wrapper div   x000D   x000D  div inner     -webkit-border-radius  10px    -moz-border-radius  10px    border-radius  10px    border  1px solid black    background-color   CCC    height  100px    width  160px     div outer     display  inline-block    -webkit-border-radius  10px    -moz-border-radius  10px    border-radius  10px    border  1px solid red    x000D   lt div class  outer  gt     lt div class  inner  gt  lt  div gt   lt  div gt  x000D   x000D   x000D     aside from using images

User · Answer

Try using padding and a background color for the border  then a border for the outline    round outline     padding  8px    background-color  white    border-radius  50     border  1px solid black      Worked in my case

User · Answer

I just found a great solution for this  and after looking at all the responses so far  I haven t seen it posted yet   So  here s what I did   I created a CSS Rule for the class and used a pseudo-class of  focus for that rule   I set outline  none to get rid of that default light-blue non-border-radius-able  outline  that Chrome uses by default   Then  in that same  focus pseudo-class  where that outline no longer exists  I added my radius and border properties  Leading to the following  outline  none  border-radius  5px  border  2px solid maroon    to have a maroon-colored outline with a border radius that now appears when the element is tab-selected by the user

User · Answer

We may see our wishes soonish by setting outline-style  auto It s on WebKits radar  http   trac webkit org changeset 198062 webkit  See ya in 2030

User · Answer

I just set outline transparent   input type text      outline  rgba 0  0  0  0     border-radius  10px     input type text  focus         border-color   0079ff

User · Answer

Use this one  box-shadow  0px 0px 0px 1px red

User · Answer

Old question now  but this might be relevant for somebody with a similar issue  I had an input field with rounded border and wanted to change colour of focus outline  I couldn t tame the horrid square outline to the input control   So instead  I used box-shadow  I actually preferred the smooth look of the shadow  but the shadow can be hardened to simulate a rounded outline    x000D   x000D      Smooth outline with box-shadow     x000D       text1 focus   x000D          box-shadow  0 0 3pt 2pt red  x000D        x000D   x000D         Hard  outline  with box-shadow     x000D       text2 focus   x000D          box-shadow  0 0 0 2pt red  x000D        x000D   lt input type text class  text1  gt   x000D   lt br gt  x000D   lt br gt  x000D   lt br gt  x000D   lt br gt  x000D   lt input type text class  text2  gt  x000D   x000D   x000D

User · Answer

As far as I know  the Outline radius is only supported by Firefox and Firefox for android   -moz-outline-radius  1em

User · Answer

clip-path  circle 100px at center     This will actually make clickable only circle  while border-radius still makes a square  but looks as circle

User · Answer

No  Borders sit on the outside of the element and on the inside of the box-model margin area  Outlines sit on the inside of the element and the box-model padding area ignores it  It isn t intended for aesthetics  It s just to show the designer the outlines of the elements  In the early stages of developing an html document for example  a developer might need to quickly discern if they have put all of the skeletal divs in the correct place  Later on they may need to check if various buttons and forms are the correct number of pixels apart from each other   Borders are aesthetic in nature  Unlike outlines they are actually apart of the box-model  which means they do not overlap text set to margin  0  and each side of the border can be styled individually   If you re trying to apply a corner radius to outline I assume you are using it the way most people use border  So if you don t mind me asking  what property of outline makes it desirable over border

User · Answer

I like this way    circle before      content         width  14px     height  14px     border  3px solid  fff     background-color   ced4da     border-radius  7px     display  inline-block     margin-bottom  -2px     margin-right  7px     box-shadow  0px 0px 0px 1px  ced4da      It will create gray circle with wit border around it and again 1px around border

[html] Outline radius?

Examples related to html

Examples related to css