CSS Dotted Border Style
A dotted border in design is usually a good way get a mild contrast with the background that contains the element. You can use the technique, for example, to somewhat emphasize a portion of your text or to help your visitor distinguish between two blocks in your interface (like the content section from the sidebar) without drawing too much attention on the separation. You can get the effect with "border-style: dotted" in your CSS definition.
HTML Example:
DIV with dotted border
CSS Example:
div#dotted {
border-width: 2px;
border-style:dotted;
border-color: #ee0000;
}
Result:
Borders (including dotted ones) around a text element can sometimes be confused with clickable items, so integrate them in your interface with care.
Share Tweet