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

CSS

Posted by karimahajjaj
karimahajjaj
604 Points

Border-radius

How can I add a border-radius to my div to have a round corners?

9 Answers

James Barnett
James Barnett
39,199 Points

Hi karima -

We've actually got a whole video dedicated just to the border-radius property, check it out in the backgrounds and borders stage of the CSS Foundations 2nd edition course.

After you watch the video, try out the code challenge if you still have questions post them here in this thread.

Melissa Bornbach
Melissa Bornbach
6,675 Points
Melissa Bornbach
Melissa Bornbach
6,675 Points

I had the same question and found this topic through a search. Larry's code worked for me after I took out the spaces between 100 and px and between 50 and px

so...

.oval {border-radius: 100px 100px / 50px 50px;}

Mark Flavin
Mark Flavin
10,199 Points
Mark Flavin
Mark Flavin
10,199 Points

To supplement what James said if you are a visual learner here is a great website to play around with the values border-radius.com.

Johan Hernández
Johan Hernández
4,141 Points
Johan Hernández
Johan Hernández
4,141 Points

Same problem... I tried all suggestions but no one worked for me. So what I did was to re start the challenge and in the first try I did it.

This is the one I used when I accomplished the challenge.

.oval { border-radius: 100px / 50px; }

karimahajjaj
karimahajjaj
604 Points
karimahajjaj
karimahajjaj
604 Points

I will try,thank you so much.

Colin McCurdie
Colin McCurdie
2,005 Points
Colin McCurdie
Colin McCurdie
2,005 Points

I'm having an issue with the following challenge from the backgrounds and borders challenge "Using the border-radius shorthand, give each corner of the '.oval' div a horizontal radius of 100px and a vertical radius of 50px."

My code is as follows...

.oval { border-radius: 100px / 50px; }

Larry Dubey
Larry Dubey
2,080 Points

Colin you are pretty close. Try

.oval {border-radius: 100 px 100 px / 50 px 50 px;}

Unsubscribed User
Unsubscribed User
4,513 Points
Unsubscribed User
Unsubscribed User
4,513 Points

try this one it worked for me

.oval{ border-radius: 100px / 50px; }

Richard Targett
Richard Targett
4,960 Points
Richard Targett
Richard Targett
4,960 Points

Im having trouble here. Since when was the backslash a viable input to the code rendered?

I've tried all what you've suggested, not working.

Richard Targett
Richard Targett
4,960 Points
Richard Targett
Richard Targett
4,960 Points

Spoke too soon.

Thanks Edward, that code worked. Didnt know / could be used or read as a viable input though.

Learn something new every time!