The borderImage property is used for setting or getting the border image of an element. It is a shorthand property, so that we can manipulate borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset and borderImageRepeat properties at one go.SyntaxFollowing is the syntax for −Setting the borderImage property −object.style.borderImage = "source slice width outset repeat|initial|inherit"ValuesThe property values are explained as follows −Sr.NoValues & Description1borderImageSourceIt specifies the image path to be used as a border.2borderImageSliceIt specifies the image-border inward offsets.3borderImageWidthIt specifies the image-border width.4borderImageOutsetIt specifies the border image area amount by which it extends beyond the border box.5borderImageRepeatIt specifies that the image-border should be rounded, repeated ... Read More

The borderColor property is used for setting or getting the border color of an element. Using the borderColor property we can manipulate the colors on each side of the border i.e. each side border having different color.SyntaxFollowing is the syntax for −Setting the borderColor propertyobject.style.borderColor = "color|transparent|initial|inherit"ValuesThe property values are explained as follows −Sr.NoValues & Description1ColorFor specifying the border color.2TransparentThis makes the border color transparent and the content under it can be seen.3initialFor setting this property to initial value.4inheritTo inherit the parent property valueExampleLet us look at an example for the borderColor Property −Live Demo    #DIV1{ ... Read More

The borderCollapse property is used for setting or returning whether elements should have shared or separate borders. It can take two values, separate and collapse.SyntaxFollowing is the syntax for −Setting the borderCollapse property −object.style.borderCollapse = "separate|collapse|initial|inherit"ValuesThe property values are explained as follows −Sr.NoValues & Description1separateThis is the default value and have each table cell separate borders.2collapseThis specifies the border to not be drawn between table cell values.3initialFor setting this property to initial value.4inheritTo inherit the parent property valueExampleLet us look at an example for the borderCollapse property −Live Demo    div {       display: flex; ... Read More

The borderBottomWidth property is used for setting or getting the bottom border width for an element.SyntaxFollowing is the syntax for −Setting the borderBottomWidth property −object.style.borderBottomWidth = "thin|medium|thick|length|initial|inherit"valuesThe property values are explained as follows −Sr.NoValues & Description1thinThis specifies a thin border.2mediumThis specifies the medium border and is the default value.3thickThis specifies a thin border.4lengthThis is used for specifying the border width in length units.5initialFor setting this property to initial value.6inheritTo inherit the parent property valueExampleLet us look at an example for the borderBottomWidth Property −    #DIV1{       height: 100px;       width: 200px;   ... Read More

The borderBottomStyle property is used for setting or getting the line style for an element’s bottom border.SyntaxFollowing is the syntax for −Setting the borderBottomStyle property object.style.borderBottomStyle = valueValuesThe property values are explained as follows −Sr.NoValues & Description1noneThis is the default value and defines no border.2hiddenThis is same as "none" but will still take border space. It is basically transparent but still there.3dottedThis defines a dotted border.4dashedThis defines a dashed border.5solidThis defines a solid border.6doubleThis defines a double border.7grooveThis defines a 3d groove border and is the opposite of ridge.8ridgeThis defines a 3D ridged border and is the opposite of groove.9insetThis defines ... Read More

The borderBottomRightRadius property is used for adding the rounded corners to the element’s bottom right border or get their measurement.SyntaxFollowing is the syntax for −Getting the borderBottomRightRadius property −object.style.borderBottomRightRadius = "length|% [length|%]|initial|inherit"The property values are explained as follows −ValuesSr.NoValues & Description1lengthFor defining the bottom right corner shape2%For defining the bottom right corner shape in percentage.3initialFor setting this property to initial value.4inheritTo inherit the parent property valueExampleLet us look at an example for the borderBottomRightRadius property −Live Demo    #DIV1{       height: 100px;       width: 200px;       border: 10px groove orange;   ... Read More

The borderBottomLeftRadius is used to add rounded corners to the element’s bottom right border. We can set and get the border shape at the bottom left corner.SyntaxFollowing is the syntax for −Setting the borderBottomLeftRadius property −object.style.borderBottomLeftRadius = "length|% [length|%]|initial|inherit"ValuesThe property values are explained as follows −Sr.NoValues & Description1lengthFor defining the bottom left corner shape2%For defining the bottom left corner shape in percentage.3initialFor setting this property to initial value.4inheritTo inherit the parent property valueExampleLet us look at an example for the borderBottomLeftRadius property −Live Demo    #DIV1{       height: 100px;       width: 200px;   ... Read More

The HTML DOM DFN object is associated with the HTML element. The text inside the element is the one being defined in the surrounding context. The DFN object represents the element.SyntaxFollowing is the syntax for −Creating a DFN object −var p = document.createElement("DFN");ExampleLet us look at an example for the HTML DOM DFN object −Live Demo DFN object example Click the below button to create a dfn element with some text inside it. CREATE    function dfnCreate() {       var x = document.createElement("DFN");       var t = document.createTextNode("The defination ... Read More

The HTML DOM Details open property is associated with the HTML open property. It is a boolean attribute and used for specifying whether the details should be visible to the user or not. When set to true the details are visible to the user. However, while setting it to false means hide the details from the user.SyntaxFollowing is the syntax for −Setting the details open property −detailsObject.open = true|falseHere, true=Details will be shown and false=Details will be hidden. The details are hidden by default.ExampleLet us look at an example for the Details open property −Live Demo Details ... Read More

The HTML DOM Details object is associated with the HTML element. This can allow us to hide the information that can only be displayed if user wants to see it.PropertiesFollowing is the property for the Details object −Sr.NoProperty & Description1openTo set or return if the details should be visible to the user or not.SyntaxFollowing is the syntax for −Creating the Details object −var p = document.createElement("DETAILS");ExampleLet us look at an example for the HTML DOM Details object −Live Demo Details object Click the below button to create a DETAILS element about a monument CREATE   ... Read More