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

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

Posted by Amanda Baldwin
Amanda Baldwin
2,983 Points

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,603 Points
Tobias Helmrich
Tobias Helmrich
31,603 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! :)

Amanda Baldwin
Amanda Baldwin
2,983 Points

Thank you so much Tobias! :)