How to make a dashed border
Short answer
The second word in border is the line style:
<div style="border: 2px dashed gray; padding: 12px;">Dashed border</div>Other styles
<style>
.b { padding: 8px; margin-bottom: 6px; border-width: 3px; border-color: teal; }
</style>
<div class="b" style="border-style: dotted;">dotted</div>
<div class="b" style="border-style: dashed;">dashed</div>
<div class="b" style="border-style: double;">double</div>
<div class="b" style="border-style: groove;">groove</div>A drop zone
Dashes often mark a place where you can drop something, such as a file:
<label style="display: grid; place-items: center; height: 100px; border: 2px dashed royalblue; border-radius: 12px; background: aliceblue; color: royalblue; cursor: pointer;">
Drop a photo here or click
<input type="file" hidden>
</label>Custom dash length
You cannot set the dash and gap length of a border — the browser picks them. If you need an exact pattern, use a gradient background or an SVG image instead of a border.
Common mistake
People write only border-width and border-color without a style and see no border. Without a style the border is not drawn: it is none by default. The shorthand border: 2px dashed gray sets everything at once.
Functions used in this recipe
- border — A border around the element: width, style and color in one property.
- outline — An outline around the element that takes no space and does not shift neighbors.
- border-radius — Rounds the corners of an element.