CSS Properties - Basic Exercises, Practice, Solution
[An editor is available at the bottom of the page to write and execute the scripts.]
27. How to defines the shape of the border of the bottom-right corner?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Border-bottom-right-radius Properties</title> </head> <body> </body> </html>
Try it in the following editor or see the solution.
a. How to defines the shape of the bottom-right corner?
b. How to defines the shape of the bottom-right corner in percentage?
c. How to defines the shape of the bottom-right corner in initial value?
d. How to defines the shape of the bottom-right corner is animatable?
See the Pen html css common editor by w3resource (@w3resource) on CodePen.
Previous: How to defines the shape of the border of the bottom-left corner?
Next: How to set the width of the bottom border?
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
HTML-CSS: Tips of the Day
How do I create a teardrop in HTML?
You can achieve the double curve easily with an inline SVG and the <path/> element instead of the <polygon/> element which doesn't allow curved shapes.
The following example uses the
- 2 quadratic bezier curve commands for the 2 top curves (lines beginning with Q)
- 1 arc command for the big bottom one (line beginning with A)
<svg width="30%" viewbox="0 0 30 42"> <path fill="transparent" stroke="#000" stroke-width="1.5" d="M15 3 Q16.5 6.8 25 18 A12.8 12.8 0 1 1 5 18 Q13.5 6.8 15 3z" /> </svg>
- Weekly Trends
- Java Basic Programming Exercises
- SQL Subqueries
- Adventureworks Database Exercises
- C# Sharp Basic Exercises
- SQL COUNT() with distinct
- Java Collection Exercises
- SQL COUNT() function
- SQL Inner Join
- Python Tutorial
- Python Array Exercises
- SQL Cross Join
- C# Sharp Array Exercises
We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook