Dashed & Dotted Border CSS Generator
Create custom dashed and dotted borders with this free online CSS generator.
Adjust the dash length, spacing, thickness, color, and other settings while checking the result with a real-time preview.
The required CSS code is generated automatically, so you can copy it and use it directly in your website or web project.
Sponsored Links
Customization
Preview
CSS Code
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
- This tool is intended for modern browsers. Some generated CSS may not work in older browsers.
- This site uses modern-normalize.css. The preview may look slightly different depending on the reset CSS or other styles used in your project.
Sponsored Links
