CSS border radius is used to set the radius of border given to the html element. This property can be used with the border property to give the radius of html element.
Syntax
|
1 |
border-radius: radius size in px or percentage; |
Example:
Test it Live
|
1 2 3 4 5 6 7 8 9 10 |
<style> .div-border-radius{ border:1px solid yellow; border-radius:20px; padding:10px; } </style> <div class="div-border-radius"> <p>This is the HTML paragraph inside the div for background size text. This div used to show the border top. This border has given here to display border.</p> </div> |
Output
This is the HTML paragraph inside the div for background size text. This div used to show the border top. This border has given here to display border.
CSS border top left radius values list
The values and description of this property is used for CSS border top left radius to specify the border.
| Sr. No. | value | Description |
|---|---|---|
| 1 | length | Used to give radius in pixels and percentage. |
| 2 | initial | Used to define as the property initial value. |
| 3 | inherit | Used to define the computed value of property on the elements parent. |
CSS border radius dotted
In this example we will use to show dotted border.
Test it Live
|
1 2 3 4 5 6 7 8 9 10 |
<style> .div-border-dotted-radius{ border:1px dotted yellow; border-radius:20px; padding:10px; } </style> <div class="div-border-dotted-radius"> <p>This is the HTML paragraph inside the div for background size text. This div used to show the border top. This border has given here to display border.</p> </div> |
Output
This is the HTML paragraph inside the div for background size text. This div used to show the border top. This border has given here to display border.