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

CSS How to Make a Website Adding Pages to a Website Style New Pages

Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points
Posted by Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points

Border-radius does not give a full circle image, why?

This is the CSS

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

6 Answers

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Have you checked with several browsers ? Under which one do you have this issue ?

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

There could be a lot of reasons for this. Often there is a mistake in either the HTML or the CSS. Is any of the styling being applied?

Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points
Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points

<img src="img/me.jpg" alt="photograph of laksakan" class="profile-photo">

This is the html.

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%;

}

This is the CSS i've applied for the profile photo.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

You need to quote using the format in the Markdown Cheatsheet linked below. I do not see any HTML.

Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points
Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points 
<img src="img/me.jpg" alt="photograph of laksakan" class="profile-photo">-->

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;

}
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I need the full code. It looks like your image line has the close of being commented out in your html file.

Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points
Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points

It has no affect.

This is the full code for the about.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Laksakan Krishnapillai | Developer + Designer</title>
    <link rel="stylesheet"  type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Laksakan Krishnapillai</h1>
        <h2>Developer + 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/me.jpg" alt="photograph of laksakan" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Laksakan Krishnapillai. This is my design and developed portfolio where I can show my favourite work. When I'm not designing or developing I keep in touch with the business world and technologies that are being developed everyday in the tech world!</p>
        <p>If you'd like to follow me on Twitter, my username is<a href="http://www.twitter.com/Lux_Krish">@Lux_Krish.</a></p>
      </section>


      <footer>
        <a href="http://twitter.com/Lux_Krish"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/laksakankrishnapillai"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> 
        <p>&copy; 2015 Laksakan Krishnapillai.</p>
      </footer>
   </div>   
  </body>  
</html>
Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I recreated the file from the information I have at this fork snapshot:

https://w.trhou.se/ms24968xw6

If you follow that link, then click the forkSnapshot button on the upper right you can preview what I did. It does make it circular for me. So, that means that you either have your path wrong (and would have no formatting) or, more likely, have an error in the CSS above that css tag. If you post either the fork snapshot or the entire CSS code we can help you find it.

Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points
Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points

This is confusing. Here is the fork snapshot. I hope this will help you to help me on the error.

https://w.trhou.se/hgb8nwlpqb

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Your fork snapshot works as coded. That means one of three things. You either did not save the CSS file when you looked at it, you did not refresh your browser, or there was a glitch in the Workspaces preview. The last one is very rare but has happened.

Here is a fork of what you forked. I changed nothing.

https://w.trhou.se/wwbil4q81v

If it still doesn't work, let me know the operating system and browser you are using. Treehouse says it works best in Chrome.

Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points
Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points

I tried refreshing, saved file and I'm guessing it may be the last one. I am currently using Google Chrome and nothing else.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Did you try my fork?

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Try restarting Chrome. If that doesn't work, then the computer. Finally, if that does not work, contact Treehouse support.

Nurul Ahsan
Nurul Ahsan
2,039 Points
Nurul Ahsan
Nurul Ahsan
2,039 Points

I think you want this: http://codepen.io/nurulahsan/pen/EjbRrd/

Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points
Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points

It looks like i need to contact Treehouse support. No luck. Thanks for the help guys.