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 trialLaksakan Krishnapillai
6,390 PointsBorder-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
28,736 PointsHave you checked with several browsers ? Under which one do you have this issue ?
Ted Sumner
Courses Plus Student 17,967 PointsThere 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
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
Courses Plus Student 17,967 PointsYou need to quote using the format in the Markdown Cheatsheet linked below. I do not see any HTML.
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
Courses Plus Student 17,967 PointsI need the full code. It looks like your image line has the close of being commented out in your html file.
Laksakan Krishnapillai
6,390 PointsIt 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>© 2015 Laksakan Krishnapillai.</p>
</footer>
</div>
</body>
</html>
Ted Sumner
Courses Plus Student 17,967 PointsI recreated the file from the information I have at this fork snapshot:
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
6,390 PointsThis is confusing. Here is the fork snapshot. I hope this will help you to help me on the error.
Ted Sumner
Courses Plus Student 17,967 PointsYour 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.
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
6,390 PointsI 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
Courses Plus Student 17,967 PointsDid you try my fork?
Laksakan Krishnapillai
6,390 PointsYes, sadly no result :/
Ted Sumner
Courses Plus Student 17,967 PointsTry restarting Chrome. If that doesn't work, then the computer. Finally, if that does not work, contact Treehouse support.
Nurul Ahsan
2,039 PointsI think you want this: http://codepen.io/nurulahsan/pen/EjbRrd/
Laksakan Krishnapillai
6,390 PointsIt looks like i need to contact Treehouse support. No luck. Thanks for the help guys.
Laksakan Krishnapillai
6,390 PointsLaksakan Krishnapillai
6,390 PointsAll browsers