12

Rather than using images, I was wondering if anyone knows how to make small circles with outlines using CSS.

I'm trying to make something similar to the bullseye symbol or Target logo.

user1118321
  • 25,567
  • 4
  • 55
  • 86
Erik
  • 5,701
  • 27
  • 70
  • 119
  • Which HTML/CSS standard are you targetting? This is fairly straight-forward using the `canvas` tag. (IIRC, Adobe Illustrator will export to a format that can be embedded on a page). – Bobby D May 31 '11 at 14:01
  • I think my answer here is exactly what you're looking for: http://stackoverflow.com/questions/4840736/easier-way-to-create-circle-div-than-using-an-image/4844059#4844059 - if not, let me know. – thirtydot May 31 '11 at 14:04

4 Answers4

14

You can use div's with rounded corners.

<style>
.circle{
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    border:1px solid #ccc;
    width:8px;
    height:8px;
}
</style>
<div class="circle"></div>

But, may be, it's better to use canvas and JavaScript.

Alex Savin
  • 286
  • 2
  • 6
8

For anyone else who wants to draw a small circle, the following code makes use of scale to resize the circle. Just chamge the scale values and you're good to go!

.circle{
    border: 2px solid #1111a1;
    padding: 10px 40px; 
    background: #dddddd;
    width: 1px;
    height: 60px;
    border-radius: 100px;
    transform: scale(0.5, 0.5);
}

Plunkr

Gabriel Stellini
  • 426
  • 4
  • 13
6

Not sure I really understood your question, but this is how you draw a circle with CSS :

.circle
{
    height: 100px;
    width: 100px;

    display: block;
    border: 1px solid black;

    border-radius: 100px;
}
user703016
  • 37,307
  • 8
  • 87
  • 112
2

Have a look at this library: http://jsdraw2d.jsfiction.com/

For drawing circles there are examples in http://jsdraw2d.jsfiction.com/demo/circleellipse.htm

Javi R
  • 2,320
  • 1
  • 17
  • 21