CSS Properties - Basic Exercises, Practice, Solution
[An editor is available at the bottom of the page to write and execute the scripts.]
50. How to set a rounded border to the top-right corner of a division element?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Border-top-right-radius</title> </head> <body> </body> </html>
Try it in the following editor or see the solution.
a. How to define the shape of top-right-radius-length corner?
b. How to define the shape of the top-right corner in percentage?
c. How to set top-right-radius-initial property to its default value?
d. How to set the border top-right radius is animatable?
See the Pen html css common editor by w3resource (@w3resource) on CodePen.
Previous:How to set a rounded border to the top-left corner of a division element?
Next: How to set the style of the top 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