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.

HTML How to Make a Website Adding Pages to a Website Make an About Page

Border-radius

I, for some reason cant figure out how to set a border radius for the image in here... I tried other things also, but they didnt work. Please help, thanks! :)

about.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Amanda Baldwin | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id= "logo">
        <h1>Amanda Baldwin</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html"class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/gratt.png" alt="Photogragh of Amanda Baldwin" class="profile-photo" style="display:block;">
       <p> Hi, I am Amanda Baldwin! This is my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy running, playing games, drinking good coffee, and more.</p>
        <p>If you'd like to message me on Email, my email is <a href="https://mail.google.com/mail/u/0/#inbox?compose=new"> amanda.baldwin0527@gmail.com </a></p>
<h3>About</h3>
      </section>
      <footer>
        <a href="https://mail.google.com/mail/u/0/#inbox?compose=new"><img src="img/Email-logo.png" alt="Email logo" class="social-icon"></a>
      </footer>
   </div>
  </body>
</html>
css/main.css
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

img {
  max-width: 150px;
  display: block; /* This is added in Task 3 */
  margin: 0 auto 30px; /* This is added for Task 4 -- 0 top margin, auto for left/right(centers) 30px for bottom */
  max-width: 150px
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;
}

1 Answer

Tobias Helmrich
Tobias Helmrich
31,601 Points

Hey Amanda,

to specify a border-radius you use the border-radius property. In this case you have to give it a value of 100%. You got the rest right so you just have to add that to your code and it should work just fine.

That's how the rule for the img elements should look like in the end:

img {
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}

I hope that helps, if you have further questions feel free to ask, good luck! :)

Thank you so much Tobias! :)