Border radius not appearing

Hi everyone
I am trying to reproduce exercises from this lesson (https://www.codecademy.com/courses/learn-css/lessons/box-model-intro/exercises/box-border-radius) in a “real” environment with VS Code editor.
I cannot seem to get the border-radius circle appearing on my page. Everything else appears ok. I’ve tried copying and pasting the exact html and css code from the exercise in Codecademy but still can’t get it to appear. Does anybody have any idea why it’s not happening?
Thanks!

Here’s my html and css.

HTML

Housesitting Travellers
</head>

<body>
    <H1>HOUSESITTING TRAVELLERS</H1>
    <p>Housesitting Travellers provide tips, tools and stories about housesitting for the novice,the experienced sitter and pet lovers who are interested in finding out more about how to travel on a budget.</p>
   
    <a href="https:/trustedhousesitters.com" target="_blank">Link to Trusted Housesitters website.</a>
    <br>
    <br>
    <a href="./About me.html" target="_blank">ABOUT ME</a>
    <br>
    <br>
    <a href="./Contact us.html" target="_blank">CONTACT US</a>


<div id="banner">
    <div class="content">
      <h1>Test circle</h1>
    </div>
  </div>
</body>

CSS
p {
font-family: ‘Trebuchet MS’, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif;
font-size: 20px;
color: blue;
}

h1 {
font-weight:bold;
font-size: 30px;
color: blue;

}

.images {
width: 100%;
height: 200px;
overflow: hidden;
}

#banner .class h1 {
width: 500;
height: 500;
border: 5 solid red;
border-radius: 50%;
}

In your CSS where you are referring to this, you have put .class, however the word ‘class’ needs to be the actual name of your class. So I believe it should instead be #banner .content h1.

Thank you!
I did change it -

#banner .content h1 {
width: 500;
height: 500;
border: 5 solid red;
border-radius: 50%;

}

but it doesn’t seem to make any diff.

Here’s the rendered page.

Ah I see the issue here. None of your measurements have a dimension associated with them. If you add “px” to the end of the numbers in width, height and border the circle should render, see this codepen.

1 Like

Thanks for this Adam. Much appreciated.

border: 5px solid red;
border-radius: 50%;

1 Like