परिचय
`outline-style: dotted` आउटलाइन को बिंदीदार रेखा बनाता है। आउटलाइन बॉर्डर के बाहर खींची जाती है और लेआउट को प्रभावित नहीं करती।
सिंटैक्स
outline-style: dotted; outline-width: 7px; /* वैकल्पिक: डॉट्स के बीच स्पेस प्रभावित करता है */
उदाहरण
<html>
<head>
<style>
.dotted-outline {
outline-width: 7px;
outline-style: dotted;
outline-color: #333;
padding: 20px;
margin: 20px;
background: #f9f9f9;
}
</style>
</head>
<body>
<p class="dotted-outline">
इस टेक्स्ट में 7px डॉटेड आउटलाइन है।
</p>
</body>
</html>
आउटलाइन बनाम बॉर्डर
| विशेषता | Outline | Border |
|---|---|---|
| लेआउट प्रभाव | नहीं (स्पेस नहीं लेता) | हाँ (बॉक्स मॉडल का हिस्सा) |
| आकार | सभी तरफ समान | प्रत्येक तरफ अलग |
| बॉर्डर-रेडियस | नहीं (आयताकार) | हाँ |
| स्थिति | बॉर्डर के बाहर | पैडिंग के किनारे पर |
अन्य आउटलाइन स्टाइल्स
outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
शॉर्टहैंड
outline: 3px dotted red; /* width style color */
