Dotted & Dashed Border CSS Generator

Normally, dashed or dotted lines created with the CSS border property cannot be changed the length and spacing of each point.
This generator utilizes the background property to create dashed and dotted lines, allowing the size and spacing of each point to be freely changed.
The output CSS code can be easily used by copy and paste.

Sponsored Links

Customization

Border

▼ Border Type

▼ Toggle Border

px

Point

  • px

    px

Shift the Border Start Position

px

px

px

px

Additional Setting

CSS Code

.box {
  background-image: repeating-linear-gradient(90deg, #000000, #000000 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #000000, #000000 12px, transparent 12px, transparent 16px), repeating-linear-gradient(90deg, #000000, #000000 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #000000, #000000 12px, transparent 12px, transparent 16px);
  background-position: left top, right top, left bottom, left top;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}

Notes

  • It is intended for use with modern browsers and may contain CSS properties that are not supported by IE or older versions of browsers.
  • The reset CSS of this site is based on “modern-normalize.css”. Depending on the reset CSS and other stylesheets loaded in your project, there may be differences from the preview appearance.

\ Share on SNS /

Sponsored Links

Tools

CSS Generators

UI Parts Generators

HTML Converters

Image Generators