Welcome to the Treehouse Community
Looking to learn something new?
Hi, why is it cutting my element when I'm adding border-radius?
Hi, when I add border radius to my <form> element it is being cut at the end of the element width and it's not looking smooth, why is that? https://w.trhou.se/3t5vszkfwp
Steven Parker215,972 Points
The "border-radius" setting works but cutting off parts of an element to make the edges look rounder. The amount of smoothness varies with the setting.
For maximum smoothness, set border-radius to 50%. To make it even smoother than that, you could reduce the width and/or increase the height to make them closer to the same. If you set them to be exactly the same, then a border-radius of 50% will give you a perfect circle.
You also might want the corner smoothness to be a fixed value, unrelated to the width and height. Try settings like "20px" or "50px" for example.
You can also set each corner individually if you want, or make elliptical corners. For more details see the MDN page on border-radius.
Jamie ReardonTreehouse Project Reviewer
If I understand correctly from your question and want you are visually expecting, I believe it is because of the value you have set for the border-radius.
Try a higher value or even 100%.
Did you want it more rounder?