FAQ: The Box Model - Border Radius

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!

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

1 Like

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;

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?

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.

2 Likes

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

When I use line-height, it spaces out each line of the text, spreading out the paragraph, but what if I want the text to still be compact together and centered in the circle? I am trying get the text vertically arranged in the center, it’s currently sticking to the top side.

We can only use line-height if there is no line-wrapping inside the button. Shrink the text to a few characters as possible and set the font-size sufficiently small enough to fit inside the circle. Then line-height will work as expected.

There is another possibility which will need more structure. Put a container inside the circle and give it a top margin to center vertically, then text align center the text. Be sure the text doesn’t overflow the container.

Sorry for the late answer. Text will stretch the container to whatever size is needed to contain it all.

Hi, I tried reading up on line-height but I still don’t get what it does here. What line are we talking about here?

If it is the height of the space above and below the text, then shouldn’t it be 1.5em to get it to center vertically?

We specify line-height as a single value. It has nothing to do with centering, albeit a convenient way to vertically center when used explicitly for the purpose, with no wrap. . The property is balanced so we don’t need to consider margins or padding. This will explain why we set it to the container height.

The property is really intended as a way to space the lines in a paragraph. line-height: 2em; is effectively emulating double line-spacing on a manual typewriter. The above technique piggy-backs on the mechanics.

Hi Roy, thanks so much for the speedy reply!!!

1 Like