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

Posted by Rob Cachia
Rob Cachia
6,494 Points

Css circle border not crisp

I am creating a website which is based on the use of keyline (border) circles. When I generate the circles using CSS, I notice that the curves appear quite jagged on the top, bottom, left and right of the circles. Any ideas how this can be improved? I've read that applying a box-shadow to the border should help, but I've tried this with no success.

I would like them to appear crisp like the passcode circles that appear on the iPhone screen. Below is the simple html and css code I am using to generate them.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
        <div class="circle">
        </div>
  </body>
</html>

.circle {
  width: 25%;
  padding-top: 25%;
  border-radius: 50%;
  border: 1px solid #333092;
}

2 Answers

Thomas Regan
Thomas Regan
2,032 Points
Thomas Regan
Thomas Regan
2,032 Points

Remember that making a circle was not actually the purpose of this code.

The purpose was to create rounded edges. People made the circles from having the rounded edges to a specific entity.

This means it will still have the properties of the square at the middle of those edges.

Rob Cachia
Rob Cachia
6,494 Points
Rob Cachia
Rob Cachia
6,494 Points

Thanks Thomas for your post. Was hoping that I might get a few more work around suggestions on this approach from other members, but it seems like the only way here would be to link to a vector or image file.