Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Unsubscribed User
6,269 PointsHi, 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
2 Answers
Steven Parker
229,644 PointsThe "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 Reardon
Treehouse Project ReviewerIf 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?