CSS Properties: How to set the initial property to the default value of border radius property?

Go to Exercise page

Solution:

HTML Code:

w3resource Tutorial
The border-radius property allows adding rounded corners to elements.

Explanation:

• This HTML document demonstrates how to set the border-radius property back to its default value using the initial keyword.
• The div element is styled with a solid border that has a thickness of 3 pixels and a color of #FF0000 (red).
• Padding is set to 10 pixels at the top and bottom and 40 pixels on the left and right sides of the div.
• The background color of the div is set to #00CCCC (light blue).
• The width of the div is set to 150 pixels.
• The border-radius property is set to initial, which resets it to its default value, eliminating any previously applied rounded corners.
• As a result, the div appears with sharp corners, as the border-radius property is reset to its default value.

Live Demo:

See the Pen border-radius-initial-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser

Yes	Yes	Yes	Yes	Yes

Go to Exercise page