Control the dashed border stroke length and distance between strokes

Question

Is it possible to control the length and distance between dashed border strokes in CSS   This example below displays differently between browsers    x000D   x000D  div   x000D    border  dashed 4px  000  x000D    padding  20px  x000D    display  inline-block  x000D    x000D   lt div gt I have a dashed border  lt  div gt  x000D   x000D   x000D    Big differences  IE 11   Firefox   Chrome    Are there any methods that can provide greater control of the dashed borders appearance

User · Accepted Answer

Css render is browser specific and I don t know any fine tuning on it  you should work with images as recommended by Ham  Reference  http   www w3 org TR CSS2 box html border-style-properties

User · Answer

I just recently had the same problem  I have made this work around  hope it will help someone  HTML   tailwind  lt div class  quot dashed-border h-14 w-full relative rounded-lg quot  gt       lt div class  quot w-full h-full rounded-lg bg-page z-10 relative quot  gt          Content goes here         lt div gt   lt  div gt   CSS  dashed-border  before     content        position  absolute    top  50     left  0    width  100     height  calc 100    4px     transform  translateY -50      background-image  linear-gradient to right   333 50   transparent 50      background-size  16px    z-index  0    border-radius  0 5rem     dashed-border  after     content        position  absolute    left  50     top  0    height  100     width  calc 100    4px     transform  translateX -50      background-image  linear-gradient to bottom   333 50   transparent 50      background-size  4px 16px    z-index  1    border-radius  0 5rem

User · Answer

There s a cool tool made by  kovart called the dashed border generator   It uses an svg as a background image to allow setting the stroke dash array you desire  and is pretty convenient   You would then simply use it as the background property on your element in place of the border   div     background-image  url  data image svg xml  3csvg width  100 25  height  100 25  xmlns  http   www w3 org 2000 svg  3e 3crect width  100 25  height  100 25  fill  none  stroke  black  stroke-width  4  stroke-dasharray  6 2c 14  stroke-dashoffset  0  stroke-linecap  square   3e 3c svg 3e      padding  20px    display  inline-block

User · Answer

In addition to the border-image property  there are a few other ways to create a dashed border with control over the length of the stroke and the distance between them  They are described below   Method 1  Using SVG  We can create the dashed border by using a path or a polygon element and setting the stroke-dasharray property  The property takes two parameters where one defines the size of the dash and the other determines the space between them   Pros    SVGs by nature are scalable graphics and can adapt to any container dimensions  Can work very well even if there is a border-radius involved  We would just have replace the path with a circle like in this answer  or  convert the path into a circle  Browser support for SVG is pretty good and fallback can be provided using VML for IE8-    Cons    When the dimensions of the container do not change proportionately  the paths tend to scale resulting in a change in size of the dash and the space between them  try hovering on the first box in the snippet   This can be controlled by adding vector-effect  non-scaling-stroke   as in the second box  but the browser support for this property is nil in IE     x000D   x000D   dashed-vector   x000D    position  relative  x000D    height  100px  x000D    width  300px  x000D    x000D  svg   x000D    position  absolute  x000D    top  0px  x000D    left  0px  x000D    height  100   x000D    width  100   x000D    x000D  path  x000D    fill  none  x000D    stroke  blue  x000D    stroke-width  5  x000D    stroke-dasharray  10  10  x000D    x000D  span   x000D    position  absolute  x000D    top  0px  x000D    left  0px  x000D    padding  10px  x000D    x000D   x000D   x000D     just for demo    x000D   x000D  div  x000D    margin-bottom  10px  x000D    transition  all 1s  x000D    x000D  div hover  x000D    height  100px  x000D    width  400px  x000D    x000D   lt div class  dashed-vector  gt  x000D     lt svg viewBox  0 0 300 100  preserveAspectRatio  none  gt  x000D       lt path d  M0 0 300 0 300 100 0 100z    gt  x000D     lt  svg gt  x000D     lt span gt Some content lt  span gt  x000D   lt  div gt  x000D   x000D   lt div class  dashed-vector  gt  x000D     lt svg viewBox  0 0 300 100  preserveAspectRatio  none  gt  x000D       lt path d  M0 0 300 0 300 100 0 100z  vector-effect  non-scaling-stroke   gt  x000D     lt  svg gt  x000D     lt span gt Some content lt  span gt  x000D   lt  div gt  x000D   x000D   x000D      Method 2  Using Gradients  We can use multiple linear-gradient background images and position them appropriately to create a dashed border effect  This can also be done with a repeating-linear-gradient but there is not much improvement because of using a repeating gradient as we need each gradient to repeat in only one direction    x000D   x000D   dashed-gradient  x000D    height  100px  x000D    width  200px  x000D    padding  10px  x000D    background-image  linear-gradient to right  blue 50   transparent 50    linear-gradient to right  blue 50   transparent 50    linear-gradient to bottom  blue 50   transparent 50    linear-gradient to bottom  blue 50   transparent 50    x000D    background-position  left top  left bottom  left top  right top  x000D    background-repeat  repeat-x  repeat-x  repeat-y  repeat-y  x000D    background-size  20px 3px  20px 3px  3px 20px  3px 20px  x000D    x000D   x000D   dashed-repeating-gradient   x000D    height  100px  x000D    width  200px  x000D    padding  10px  x000D    background-image  repeating-linear-gradient to right  blue 0   blue 50   transparent 50   transparent 100    repeating-linear-gradient to right  blue 0   blue 50   transparent 50   transparent 100    repeating-linear-gradient to bottom  blue 0   blue 50   transparent 50   transparent 100    repeating-linear-gradient to bottom  blue 0   blue 50   transparent 50   transparent 100    x000D    background-position  left top  left bottom  left top  right top  x000D    background-repeat  repeat-x  repeat-x  repeat-y  repeat-y  x000D    background-size  20px 3px  20px 3px  3px 20px  3px 20px  x000D    x000D   x000D     just for demo    x000D   x000D  div   x000D    margin  10px  x000D    transition  all 1s  x000D    x000D  div hover   x000D    height  150px  x000D    width  300px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs prefixfree 1 0 7 prefixfree min js  gt  lt  script gt  x000D   lt div class  dashed-gradient  gt Some content lt  div gt  x000D   lt div class  dashed-repeating-gradient  gt Some content lt  div gt  x000D   x000D   x000D    Pros    Scalable and can adapt even if the container s dimensions are dynamic  Does not make use of any extra pseudo-elements which means they can be kept aside for any other potential usage    Cons    Browser support for linear gradients is comparatively lower and this is a no-go if you want to support IE 9-  Even libraries like CSS3 PIE do not support creation of gradient patterns in IE8-  Cannot be used when border-radius is involved because backgrounds don t curve based on border-radius  They get clipped instead      Method 3  Box Shadows  We can create a small bar  in the shape of the dash  using pseudo-elements and then create multiple box-shadow versions of it to create a border like in the below snippet    If the dash is a square shape then a single pseudo-element would be enough but if it is a rectangle  we would need one pseudo-element for the top   bottom borders and another for left   right borders  This is because the height and width for the dash on the top border will be different from that on the left   Pros    The dimensions of the dash is controllable by changing the dimensions of the pseudo-element  The spacing is controllable by modifying the space between each shadow  A very unique effect can be produced by adding a different color for each box shadow    Cons    Since we have to manually set the dimensions of the dash and the spacing  this approach is no good when the dimensions of the parent box is dynamic  IE8 and lower do not support box shadow  However  this can be overcome by using libraries like CSS3 PIE  Can be used with border-radius but positioning them would be very tricky with having to find points on a circle  and possibly even transform      x000D   x000D   dashed-box-shadow  x000D    position  relative  x000D    height  120px  x000D    width  120px  x000D    padding  10px  x000D    x000D   dashed-box-shadow before     for border top and bottom    x000D    position  absolute  x000D    content      x000D    top  0px  x000D    left  0px  x000D    height  3px     height of the border top and bottom    x000D    width  10px     width of the border top and bottom    x000D    background  blue     border color    x000D    box-shadow  20px 0px 0px blue  40px 0px 0px blue  60px 0px 0px blue  80px 0px 0px blue  100px 0px 0px blue     top border    x000D      0px 110px 0px blue  20px 110px 0px blue  40px 110px 0px blue  60px 110px 0px blue  80px 110px 0px blue  100px 110px 0px blue     bottom border    x000D    x000D   dashed-box-shadow after     for border left and right    x000D    position  absolute  x000D    content      x000D    top  0px  x000D    left  0px  x000D    height  10px     height of the border left and right    x000D    width  3px     width of the border left and right    x000D    background  blue     border color    x000D    box-shadow  0px 20px 0px blue  0px 40px 0px blue  0px 60px 0px blue  0px 80px 0px blue  0px 100px 0px blue     left border    x000D      110px 0px 0px blue  110px 20px 0px blue  110px 40px 0px blue  110px 60px 0px blue  110px 80px 0px blue  110px 100px 0px blue     right border    x000D    x000D   lt div class  dashed-box-shadow  gt Some content lt  div gt  x000D   x000D   x000D

User · Answer

I just recently had the same problem    I managed to solve it with two absolutely positioned divs carrying the border  one for horizontal and one for vertical   and then transforming them  The outer box just needs to be relatively positioned    lt div class  relative  gt       lt div class  absolute absolute--fill overflow-hidden  gt           lt div class  absolute absolute--fill b--dashed b--red              style                   border-width  4px 0px 4px 0px                  transform  scaleX 2             gt  lt  div gt           lt div class  absolute absolute--fill b--dashed b--red              style                   border-width  0px 4px 0px 4px                  transform  scaleY 2             gt  lt  div gt       lt  div gt        lt div gt    Box content goes here    lt  div gt   lt  div gt    Note  i used tachyons in this example  but i guess the classes are kind of self-explanatory

User · Answer

Stroke length depends on stroke width  You can increase length by increasing width and hide part of border by inner element  EDIT  added pointer-events  none  thanks to benJ   thin       background   F4FFF3      border  2px dashed  3FA535        position  relative      thin after       content          position  absolute      left  -1px      top  -1px      right  -1px      bottom  -1px      border  1px solid  F4FFF3      pointer-events  none     https   jsfiddle net ksf9zoLh

User · Answer

The native dashed border property value does not offer control over the dashes themselves    so bring on the border-image property    Brew your own border with border-image  Compatibility  It offers great browser support  IE 11 and all modern browsers   A normal border can be set as a fallback for older browsers   Let s create these  These borders will display exactly the same cross-browser      Step 1 - Create a suitable image  This example is 15 pixels wide by 15 pixels high and the gaps are currently 5px wide   It is a  png with transparency   This is what it looks like in photoshop when zoomed in     This is what it looks like to scale     Controlling gap and stroke length  To create wider   shorter gaps or strokes  widen   shorten the gaps or strokes in the image   Here is an image with wider 10px gaps    correctly scaled     Step 2 - Create the CSS  mdash  this example requires 4 basic steps   Define the border-image-source   border-image-source url  http   i stack imgur com wLdVc png       Optional - Define the border-image-width   border-image-width  1    The default value is 1  It can also be set with a pixel value  percentage value  or as another multiple  1x  2x  3x etc   This overrides any border-width set  Define the border-image-slice   In this example  the thickness of the images top  right  bottom and left borders is 2px  and there is no gap outside of them  so our slice value is 2   border-image-slice  2     The slices look like this  2 pixels from the top  right  bottom and left    Define the border-image-repeat   In this example  we want the pattern to repeat itself evenly around our div  So we choose   border-image-repeat  round     Writing shorthand  The properties above can be set individually  or in shorthand using border-image   border-image  url  http   i stack imgur com wLdVc png   2 round    Complete example  Note the border  dashed 4px  000 fallback  Non-supporting browsers will receive this border    x000D   x000D   bordered   x000D    display  inline-block  x000D    padding  20px  x000D       Fallback dashed border x000D       - the 4px width here is overwritten with the border-image-width  if set  x000D       - the border-image-width can be omitted below if it is the same as the 4px here x000D       x000D    border  dashed 4px  000  x000D     x000D       Individual border image properties    x000D    border-image-source  url  http   i stack imgur com wLdVc png    x000D    border-image-slice  2  x000D    border-image-repeat  round    x000D     x000D       or use the shorthand border-image    x000D    border-image  url  http   i stack imgur com wLdVc png   2 round  x000D    x000D   x000D   x000D    The border image of this one creates wider gaps   x000D   largeGaps   x000D    border-image-source  url  http   i stack imgur com LKclP png    x000D    margin  0 20px  x000D    x000D   lt div class  bordered  gt This is bordered  lt  div gt  x000D   x000D   lt div class  bordered largeGaps  gt This is bordered and has larger gaps  lt  div gt  x000D   x000D   x000D

User · Answer

This will make an orange and gray border using the class  myclass  on the div    myclass       outline dashed darkorange  12px      border solid slategray  14px      outline-offset -14px

User · Answer

Short one  No  it s not  You will have to work with images instead

[css] Control the dashed border stroke length and distance between strokes

Examples related to css

Examples related to border

Examples related to css-shapes