Skip to content

Instantly share code, notes, and snippets.

@kogakure
Created February 12, 2013 13:31
Show Gist options
  • Star 17 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kogakure/4769904 to your computer and use it in GitHub Desktop.
Save kogakure/4769904 to your computer and use it in GitHub Desktop.
SASS: Circle Mixin
@mixin circle($width, $color) {
width: $width;
height: $width;
background: $color;
-webkit-border-radius: $width/2;
-moz-border-radius: $width/2;
border-radius: $width/2;
}
.circle {
@include circle(200px, #999);
}
@tyrel86
Copy link

tyrel86 commented Jul 11, 2013

Thanks

@sospedra
Copy link

nice job, as a bracket-less fanatic let me add the sass version and also some modification to fit with any kind of display type object ;)

=circle($size, $color, $display)
    display: $display
    line-height: $size
    width: $size
    height: $size
    background: $color
    -webkit-border-radius: $size/2
    -moz-border-radius: $size/2
    border-radius: $size/2

Implementation e.g.:

+circle(50px, $color, inline-block)

@cinatic
Copy link

cinatic commented Apr 5, 2018

border-radius: 50%;
has the same effect

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment