HTML DOM Style border Property Last Updated : 22 Apr, 2024 Comments Improve Suggest changes Like Article Like Report The HTML DOM Style border Property is used to set or return the style of an element's border. We can set the different styles of the border for individual sides (top, right, bottom, left). The border-style property can take multiple values for each side. SyntaxIt is used to return the Style Property.object.style.borderStyle It is used to set the Style Property.object.style.borderStyle = value Property ValuesProperty Value Description noneNo border is created and it is left plainhiddenJust like None it doesn't show any border unless a background image is added, then the border-top-width will be set to 0 irrespective of the user defined value. dottedA series of dots are displayed in a line as the border.solidA single solid and bold line is used as a border.dashedA series of square dashed lines are used as a border.doubleTwo lines placed parallel to each other act as the border.grooveDisplays a 3D grooved border, its effect depends on border-color value.ridgeDisplays a 3D ridged border, its effect depends on border-color value.insetDisplays a 3D inset border, its effect depends on border-color value.Return ValueIt returns a string value that represents the style of an element's border. Example 1: In this example, we will see the use DOM Style border Property HTML <!DOCTYPE html> <html> <head> <title> HTML DOM Style border Property </title> <style> #GFG { border: 5px solid black; width: 350px; padding: 10px; } </style> </head> <body> <h2>HTML DOM Style border Property</h2> <div id="GFG"> A Computer Science Portal for geeks </div> <br> <button onclick="myFunction()"> Click Here! </button> <script> function myFunction() { document.getElementById("GFG").style.borderStyle = "dashed dotted double solid"; } </script> </body> </html> Output: Example 2: In this example, we will see the use DOM Style border Property HTML <!DOCTYPE html> <html> <head> <title> HTML DOM Style border Property </title> <style> #GFG { border: 5px solid black; width: 350px; padding: 10px; } </style> </head> <body> <h2>HTML DOM Style border Property</h2> <div id="GFG"> A Computer Science Portal for geeks </div> <br> <button onclick="myFunction()"> Click Here! </button> <script> function myFunction() { document.getElementById("GFG").style.borderStyle = "dotted"; } </script> </body> </html> Output: Supported BrowsersGoogle Chrome 1 and aboveEdge 12 and aboveInternet Explorer 4 and aboveFirefox 1 and aboveOpera 3.5 and aboveSafari 1 and above Comment More infoAdvertise with us M manaschhabra2 Follow Improve Article Tags : Web Technologies HTML Web technologies HTML-DOM HTML-Property +1 More Similar Reads HTML | DOM Style left Property The Style left property is used for setting or returning the left position of a positioned element. The Style left property is used for specifying the left position of the elements including padding, scrollbar, border, and margin. Syntax : To get the property:object.style.leftTo set the propertyobje 2 min read HTML | DOM Quote Object The Quote Object in HTML DOM is used to represent the HTML <q> element. The quote element can be accessed by using getElementById() method.Property Value: It contains single attribute value cite. This attribute is used to set or return the value of the cite attribute in a <q> element.Syn 2 min read HTML | DOM Progress Object The Progress Object in HTML DOM is used to represent the HTML <progress> element. The <progress> element can be accessed by using getElementById() method.Property Values: labels: It returns the list of progress bar labels.max: It is used to set or return the progress bar value of the max 2 min read HTML | DOM Style alignItems Property The DOM Style alignItems Property is used to set or return the default alignment of items in a flexible container. Syntax: To get the alignItems Propertyobject.style.alignItemsTo set the alignItems Propertyobject.style.alignItems = "stretch|center|flex-start|flex-end| baseline|initial|inherit" Prope 5 min read HTML| DOM Ins Object The DOM ins Object is used to represent the HTML <ins> element. The ins element is accessed using getElementById().Properties: cite: It is used to set or return the value of the cite attribute of a inserted element.dateTime: It is used to sets or returns the value of the dateTime attribute of 2 min read HTML | DOM Style emptyCells Property Sometimes HTML tables contain empty cells. The DOM Style emptyCells is used to display borders and background for the empty cells. Syntax: It is used to return the emptyCells property.object.style.emptyCellsIt is used to set emptyCells property.object.style.emptyCells = "show|hide|initial|inherit" R 2 min read HTML DOM UiEvent The DOM UiEvent in HTML is an event that is triggered by the user interface belonging to the UiEvent Object. The two main purposes of the UI Event are: Allows registration of event listeners and describes event flow through a tree structure.Provide a common subset of the current event systems used i 2 min read HTML | DOM Style backgroundPosition Property The HTML DOM Style backgroundPosition : It sets or returns position of the background-image in an element. Syntax: To get the backgroundPosition propertyobject.style.backgroundPositionTo set the backgroundPosition propertyobject.style.backgroundPosition = value Return Values: It returns a string val 4 min read HTML DOM Article Object The DOM article object is used to represent the HTML <article> element. The article element can be accessed using the getElementById() method. Syntax: document.getElementById("id"); Where ‘id’ is the ID assigned to the article tag. Example 1: In the below program the article object is accessed 1 min read HTML DOM li Object The DOM Li Object is used to represent the HTML <li> element. The li element is accessed by getElementById(). Properties: value: It has an attribute named value which is used to return the value of the value attribute of the <li> tag. Syntax: document.getElementById("ID"); Where “id†is 1 min read Like