
- HTML Home
- HTML Roadmap
- HTML Introduction
- HTML History & Evolution
- HTML Editors
- HTML Basic Tags
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Fonts
- HTML Blocks
- HTML Style Sheet
- HTML Formatting
- HTML Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Frames
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Code Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Table Headers & Captions
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB & RGBA Colors
- HTML - HEX Colors
- HTML - HSL & HSLA Colors
- HTML - HSL Color Picker
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - Document Object Model (DOM)
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Character Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - DOM Style Object outlineStyle Property
HTML DOM Style Object outlineStyle property sets or returns the outline style around an element.
Syntax
Set the outlineStyle property:object.style.outlineStyle= "value| initial | inherit";Get the outlineStyle property:
object.style.outlineStyle;
Property Values
Value | Description |
---|---|
none | It is default value which specifies no outline. |
hidden | It specifies outline to turn off. |
dotted | It specifies a dotted outline. |
dashed | It specifies a dashed outline. |
solid | It specifies a solid outline. |
double | It defines a double outline in which two lines are used as outline and it's width is same as specified by outlineWidth. |
groove | It specifies a 3D grooved outline whose effect depends on the outline-color value. |
ridge | It specifies a 3D grooved outline whose effect depends on the outline-color value. |
inset | It specifies a 3D inset outline whose effect depends on the outline-color value. |
outset | It specifies a 3D outset outline whose effect depends on the outline-color value. |
initial | It is used to set this property to it's default value. |
inherit | It is used to inherit the property of it's parent element. |
Return Value
It returns a string which represents outline style of an element.
Examples of HTML DOM Style Object 'outlineStyle' Property
The following examples sets outline style of div element.
Set Outline Style of div Element
The following example sets the outline style of div element to dashed, solid and dotted.
<!DOCTYPE html> <html> <head> <title> HTML DOM Style Object outlineStyle Property </title> <style> #outline { border: 2px solid yellow; outline: 2px #04af2f; } </style> </head> <body> <button onclick="fun()">Dashed</button> <button onclick="funtwo()">Solid </button> <button onclick="funthree()">Dotted</button> <br><br><br> <div id="outline"> Welcome to Tutorials Point... </div> <script> function fun() { document.getElementById("outline") .style.outlineStyle = "dashed"; } function funtwo() { document.getElementById("outline") .style.outlineStyle = "solid"; } function funthree() { document.getElementById("outline") .style.outlineStyle = "dotted"; } </script> </body> </html>
Set Outline Style to 'double', 'groove' and 'ridge'
The following example sets the outline style of div element to double, groove and ridge.
<!DOCTYPE html> <html> <head> <title> HTML DOM Style Object outlineStyle Property </title> <style> #outline { border: 2px solid yellow; outline: 2px #04af2f; } </style> </head> <body> <button onclick="fun()">Double</button> <button onclick="funtwo()">Groove</button> <button onclick="funthree()">Ridge</button> <br><br><br> <div id="outline"> Welcome to Tutorials Point... </div> <script> function fun() { document.getElementById("outline") .style.outlineStyle = "double"; } function funtwo() { document.getElementById("outline") .style.outlineStyle = "groove"; } function funthree() { document.getElementById("outline") .style.outlineStyle = "ridge"; } </script> </body> </html>
Set Outline Style to 'inset' and 'outset'
The following example sets the outline style of div element to inset and outset.
<!DOCTYPE html> <html> <head> <title> HTML DOM Style Object outlineStyle Property </title> <style> #outline { border: 2px solid yellow; outline: 2px #04af2f; } </style> </head> <body> <button onclick="fun()">Inset</button> <button onclick="funthree()">Outset</button> <br><br><br> <div id="outline"> Welcome to Tutorials Point... </div> <script> function fun() { document.getElementById("outline") .style.outlineStyle = "inset"; } function funthree() { document.getElementById("outline") .style.outlineStyle = "outset"; } </script> </body> </html>
Supported Browsers
Property | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
outlineStyle | Yes 1 | Yes 12 | Yes 1.5 | Yes 1.2 | Yes 7 |
html_dom.htm
Advertisements