HTML DOM Style borderRadius Property

Last Updated : 15 Jun, 2023

The DOM Style borderRadius Property is used to set or return the four different borderRadius properties such as borderTopRightRadius, borderBottomRightRadius, and borderBottomLeftRadius of an element. It is used to add a rounded corner in an element.

Syntax:

It is used to get the border radius property.

object.style.borderRadius

It is used to set the borderRadius property.

object.style.borderRadius = "1-4 length|% / 1-4 length|%
|initial|inherit"

Property values:

length: This will define the shape of the corner default value is 0.
%: This will also define the shape of the corner in percentage.
initial: This will set the property to its default value.
inherit: This will inherit the property from its parent element.

Return Value: It returns a string value that represents the top, left, and bottom borderRadius of an element.

Example: In this example, we will use DOM Style borderRadius

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>DOM Style borderRadius Property</title>
    <style>
        h1 {
            color: green;
            font-size: 35px;
        }
        #GFG {
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>DOM Style borderRadius Property</h2>
        <div id="GFG">
            <h2>GeeksforGeeks</h2>
        </div>
        <br>
        <button onclick="Geeks()">Submit</button>
      
        <script>
            function Geeks() {
                document.getElementById("GFG").style.borderRadius
                    = "25px";
            }
        </script>
    </center>
</body>

</html>

Output:

Supported Browsers: The browser supported by DOM Style borderRadius property are listed below:

Google Chrome 4.0
Edge 12
Internet Explorer 9.0
Firefox 4.0
Opera 10.5
Apple Safari 5.0

M

manaschhabra2

Improve

Article Tags :

Practice Tags :

Misc

Similar Reads

HTML DOM getAttributeNode() Method

The getAttributeNode() method in HTML DOM is used to return the attribute node with the specified name of an element, as an attribute object. This function is similar to the getAttribute() method but the only difference is that the getAttribute() method returns the value of an attribute node, not an

HTML DOM scrollWidth Property

The DOM scrollWidth property is used to return the width of an element. This property includes padding and also content that is not visible on the screen due to overflow but does not include a border, scrollbar, or margin. It is a read-only property. Syntax: element.scrollWidth Return Value: It retu

HTML DOM cloneNode() Method

The HTML DOM cloneNode() Method is used to copy or clone a node on which the cloneNode() method is called. For example, a list item can be copied from one list to another using this method.Syntax: yourNode.cloneNode([deep]) Parameters: The [deep] is an optional argument. We can set its value to "tru

HTML onunload Event Attribute

The onunload event attribute works when the document is being unloaded i.e. it occurs when the browser has been closed. It is mostly used when the user opens a link and submits the form and closes the browser window. Basically, it is: Fired when a user navigates away from a page or closes the browse

HTML DOM exitFullscreen() Method

The exitFullscreen() method requests the element which is currently in full-screen mode to be taken out of full-screen mode. If the element is not in full-screen mode, then nothing gets changed. The reverse of this method is requestFullscreen(). Syntax: HTMLElementObject.exitFullscreen() Parameters:

HTML DOM children Property

The DOM children property is used to return an HTML collection of all the child elements of the specified element. The elements in the collection can be accessed by index numbers. It differs from childNodes as childNodes contain all nodes (i.e. it includes text and comment nodes as well) but on the

HTML DOM button Object

The button object in HTML is used to represent a <button> element. The getElementById() method is used to get the button object. Property Values:Property ValuesDescriptionautofocusSets or returns whether a button should automatically get focused on page load.defaultValueSets or returns the def

HTML DOM scrollLeft Property

HTML DOM scrollLeft property is used to return or set the number of pixels an element i.e. scrolled horizontally. If the content of the element doesn't generate a scroll bar, then its scrollLeft value is 0;Â Syntax: It returns the scrollLeft property.element.scrollLeftIt is used to set the scrollLef

HTML DOM scrollHeight Property

The DOM scrollHeight property is used to return the height of an element. This property includes padding and also content that is not visible on the screen due to overflow but does not include a border, scrollbar, or margin. It is a read-only property. Syntax: element.scrollHeight Return Value: It r

HTML DOM lastElementChild Property

The DOM lastElementChild property is used to return the last child element of the specified element or null if there is no last element. It is similar to the lastChild property but the difference is that the lastChild property returns all last-child nodes i.e. it includes text and comment nodes as w