FAQ: The Box Model - Border Radius


#1

This community-built FAQ covers the “Border Radius” exercise from the lesson “The Box Model”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Border Radius

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!


#2

Is it possible if I want to change border-radius of only two sides?


#3

Use a couple of these properties to get two sides only:

border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;


#4

I’ve tried padding, vertical-aligning, text-aligning, and reviewed The Box Model in order to center the h1 text within the circle-shaped 100% border-radius white margin and none of that has worked so far.

How can I pull this off?


#5
h1 {
  width: 3em;
  height: 3em;
  line-height: 2.8em;
  border: 2px solid teal;
  border-radius: 50%;
  text-align: center;
  margin: 1em auto;
}

birds_border-radius

Height and width need to be the same, and we achieve vertical centering with the line-height property. Horizontal alignment is done with text-align and centering of the H1 is done with the margin property.


#6

I was playing around with the border-radius and I ran into something…

When I raise the pixels of the border radius to 60px the letters over lap the border.

Why wouldn’t the letters adjust accordingly to the border? Doesn’t the content need to stay inside the border?

Thanks