CSS Properties: How to defines the shape of the bottom-left corner in percentage?
Solution:
HTML Code:
Explanation:
- This HTML document demonstrates how to define the shape of the bottom-left corner of a div using a percentage value for the radius.
- The CSS style block applies styling to the div element with the id xyx.
- margin-left: 10px;, margin-top: 3px;, and margin-right: 15px; set the left, top, and right margins of the div, respectively.
- background-color: #CCFF63; sets the background color of the div to #CCFF63.
- border: 1px solid #c3c3c3; sets a solid border with a width of 1 pixel and color #c3c3c3 for all sides of the div.
- height: 200px; sets the height of the div to 200 pixels.
- border-bottom-left-radius: 10%; defines the shape of the bottom-left corner of the border to have a horizontal and vertical radius of 10%, allowing for a more flexible and responsive design using percentage values.
Live Demo:
See the solution in the browser
Supported browser
![]() |
![]() |
![]() |
![]() |
![]() |
Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.