Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

2 Answers

Steven Parker
Steven Parker
215,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 Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse 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?