How to draw circle in html page

Question

How do you draw a circle using HTML5 and CSS3    Is it also possible to put text inside

User · Answer

It is quite possible in HTML 5  Your options are  Embedded SVG and  lt canvas gt  tag   To draw circle in embedded SVG   x000D   x000D   lt svg xmlns  http   www w3 org 2000 svg  gt  x000D       lt circle cx  50  cy  50  r  50  fill  red    gt  x000D   lt  svg gt  x000D   x000D   x000D    Circle in  lt canvas gt    x000D   x000D  var canvas   document getElementById  circlecanvas    x000D  var context   canvas getContext  2d    x000D  context arc 50  50  50  0  Math PI   2  false   x000D  context fillStyle    red   x000D  context fill   x000D   lt canvas id  circlecanvas  width  100  height  100  gt  lt  canvas gt  x000D   x000D   x000D

User · Answer

You can use the border-radius attribute to give it a border-radius equivalent to the element s border-radius   For example    lt div style  border-radius 10px  -moz-border-radius 10px  -webkit-border-radius 10px  width  20px  height  20px  background  red  border  solid black 1px   gt  amp nbsp  lt  div gt     The reason for using the -moz and -webkit extensions is to support pre-CSS3-final versions of Gecko and Webkit    There are more examples on this page   As far as inserting text  you can do it but you have to be mindful of the positioning  as most browsers  box padding model still uses the outer square

User · Answer

x000D   x000D  h1   x000D  border  dashed 2px blue  x000D    width  200px  x000D    height  200px  x000D    border-radius  100px  x000D    text-align  center  x000D    line-height  60px  x000D     x000D    x000D   lt h1 gt   lt br gt hello world lt  h1 gt  x000D   x000D   x000D

User · Answer

As of 2015  you can make it and center the text with as few as 15 lines of CSS  Fiddle     x000D   x000D  body   x000D    background-color   fff  x000D    x000D   circle   x000D    position  relative  x000D    background-color   09f  x000D    margin  20px auto  x000D    width  400px  x000D    height  400px  x000D    border-radius  200px  x000D    x000D   text   x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    transform  translate -50   -50    x000D    color   fff  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   x000D   lt head gt  x000D     lt meta charset  UTF-8  gt  x000D     lt title gt circle with text lt  title gt  x000D   x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div id  circle  gt  x000D       lt div id  text  gt Text in the circle lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Without any -webkit-s  this works on IE11  Firefox  Chrome and Opera  and it is valid HTML5  experimental  and CSS3   Same on MS Edge  2020

User · Answer

at-counter-box       border  2px solid  1ac6ff      width  150px      height  150px      border-radius  100px      font-family   Oswald Sans   sans-serif      color  000     at-counter-box-content       position  relative     at-counter-content span       font-size  40px      font-weight  bold       text-align  center      position  relative      top  55px

User · Answer

border-radius  50   will turn all elements into a circle  regardless of size  At least  as long as the height and width of the target are the same  otherwise it will turn into an oval    x000D   x000D   target  x000D      width  100px  x000D      height  100px  x000D      background-color   aaa  x000D      border-radius  50   x000D    x000D   lt div id  target  gt  lt  div gt  x000D   x000D   x000D    Note  browser prefixes are not needed anymore for border-radius    Alternatively  you can use clip-path  circle    to turn an element into a circle as well  Even if the element has a greater width than height  or the other way around   it will still become a circle  and not an oval    x000D   x000D   target  x000D      width  200px  x000D      height  100px  x000D      background-color   aaa  x000D      clip-path  circle    x000D    x000D   lt div id  target  gt  lt  div gt  x000D   x000D   x000D    Note  clip-path is not  yet  supported by all browsers    You can place text inside of the circle  simply by writing the text inside of the tags of the target  like so    lt div gt text lt  div gt    If you want to center text in the circle  you can do the following    x000D   x000D   target  x000D      width  100px  x000D      height  100px  x000D      background-color   aaa  x000D      border-radius  50   x000D   x000D      display  flex  x000D      align-items  center  x000D    x000D   x000D   text  x000D      width  100   x000D      text-align  center  x000D    x000D   lt div id  target  gt  x000D       lt div id  text  gt text lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The followings are my 9 solutions  Feel free to insert text into the divs or svg elements   border-radius clip-path html entity pseudo element radial-gradient svg circle  amp  path canvas arc   img tag pre tag   x000D   x000D  var c   document getElementById  myCanvas    var ctx   c getContext  2d    ctx beginPath    ctx arc 50  50  50  0  2   Math PI   ctx fillStyle     B90136   ctx fill    x000D   circle1     background-color   B90136    width  100px    height  100px    border-radius  50px      circle2     background-color   B90136    width  100px    height  100px    clip-path  circle        circle3     color   B90136    font-size  100px    line-height  100px      circle4  before     content        display  block    width  100px    height  100px    border-radius  50px    background-color   B90136      circle5     background-image  radial-gradient  B90136 70   transparent 30      height  100px    width  100px    x000D   lt h3 gt 1 border-radius lt  h3 gt   lt div id  circle1  gt  lt  div gt   lt hr  gt   lt h3 gt 2 clip-path lt  h3 gt   lt div id  circle2  gt  lt  div gt   lt hr  gt   lt h3 gt 3 html entity lt  h3 gt   lt div id  circle3  gt  amp  11044  lt  div gt   lt hr  gt   lt h3 gt 4 pseudo element lt  h3 gt   lt div id  circle4  gt  lt  div gt   lt hr  gt   lt h3 gt 5 radial-gradient lt  h3 gt   lt div id  circle5  gt  lt  div gt   lt hr  gt   lt h3 gt 6 svg circle  amp  path lt  h3 gt   lt svg width  100  height  100  gt     lt circle cx  50  cy  50  r  50  fill   B90136    gt   lt  svg gt   lt hr  gt   lt h3 gt 7 canvas arc   lt  h3 gt   lt canvas id  myCanvas  width  100  height  100  gt  lt  canvas gt   lt hr  gt   lt h3 gt 8 img tag lt  h3 gt   amp nbsp   amp nbsp   amp lt img src  circle png  width  100  height  100    amp gt   lt hr  gt   lt h3 gt 9 pre tag lt  h3 gt   lt pre style  line-height 8px   gt                                                                                                                              lt  pre gt  x000D   x000D   x000D

User · Answer

lt div class  at-counter-box-content  gt      lt div class  at-counter-content  gt          lt span gt 40  lt  span gt      lt  div gt  lt  --at-counter-content-- gt    lt  div gt  lt  --at-counter-box-content-- gt

User · Answer

Simply do the following in the script tags    x000D   x000D   lt  Doctype html gt  x000D   lt html gt  x000D   lt head gt  x000D    lt title gt Circle Canvas lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D    lt canvas id  myCanvas  width  300  height  150  style  border 1px solid  x000D   d3d3d3   gt  x000D    lt body gt  x000D     lt script gt  x000D     var c   document getElementById  myCanvas    x000D     var ctx   c getContext  2d    x000D     ctx beginPath    x000D     ctx arc 100  75  50  0  2   Math PI   x000D     ctx stroke    x000D     lt  script gt  x000D       lt  body gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    And there you go you got your circle

User · Answer

Here s a circle that I used for a CS 1 6 stats website  A beautiful four colors circle   x000D   x000D   circle         border-top  8px ridge  d11967        border-right  8px ridge  d32997        border-bottom  8px ridge  5246eb        border-left  8px ridge  fc2938        border-radius  50   width  440px  height  440px    x000D   lt div id  circle  gt  lt  div gt  x000D   x000D   x000D   Adjust the circle diameter by chaging the width and height  You can also rotate and skew by using skewY    skewX   and rotate      transform  rotate 60deg     transform  skewY -5deg     transform  skewX -15deg

User · Answer

If you re using sass to write your CSS you can do    mixin draw circle  radius     width   radius 2    height   radius 2    -webkit-border-radius   radius    -moz-border-radius   radius    border-radius   radius      my-circle      include draw circle 25px     background-color  red      Which outputs    my-circle     width  50px    height  50px    -webkit-border-radius  25px    -moz-border-radius  25px    border-radius  25px    background-color  red      Try it here  https   www sassmeister com

User · Answer

There are a few unicode circles you could use    x000D   x000D      font-size  50px    x000D   amp  x25CB  x000D   amp  x25CC  x000D   amp  x25CD  x000D   amp  x25CE  x000D   amp  x25CF  x000D   x000D   x000D    More shapes here   You can overlay text on the circles if you want to    x000D   x000D   container   x000D      position  relative  x000D    x000D   circle   x000D    font-size  50px  x000D    color   58f  x000D    x000D   text   x000D      z-index  1  x000D      position  absolute  x000D      top  21px  x000D      left  11px  x000D    x000D   lt div id  container  gt  x000D       lt div id  circle  gt  amp  x25CF  lt  div gt  x000D       lt div id  text  gt a lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    You could also use a custom font  like this one  if you want to have a higher chance of it looking the same on different systems since not all computers browsers have the same fonts installed

User · Answer

You can t draw a circle per se  But you can make something identical to a circle   You d have to create a rectangle with rounded corners  via border-radius  that are one-half the width height of the circle you want to make    x000D   x000D       circle   x000D        width  50px  x000D        height  50px  x000D        -webkit-border-radius  25px  x000D        -moz-border-radius  25px  x000D        border-radius  25px  x000D        background  red  x000D        x000D   lt div id  circle  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can use border-radius property  or make a div with fixed height and width and a background with png circle

User · Answer

border-radius 50  if you want the circle to adjust to whatever dimensions the container gets  e g  if the text is variable length  Don t forget the -moz- and -webkit- prefixes   prefixing no longer needed   x000D   x000D  div    border-radius  50     display  inline-block    background  lightgreen      a    padding  50px      b    width  100px    height  100px    x000D   lt div class  a  gt  lt  div gt   lt div class  b  gt  lt  div gt  x000D   x000D   x000D

User · Answer

No width and height requirement  specify just whichever you prefer  No SVG  canvas or Unicode   x000D   x000D   circle       background  green      border-radius  50       width  1rem      aspect-ratio  1 1    x000D   lt div class  circle  gt  lt  div gt  x000D   x000D   x000D   Borwser support   Chrome Edge 88  Firefox 83  behind a flag

User · Answer

lt head gt          lt style gt           circle         width 200px         height 200px         border-radius 100px         background-color red                   lt  style gt      lt  head gt        lt body gt          lt div id  circle  gt  lt  div gt      lt  body gt    simple and novice

User · Answer

x000D   x000D   circle  x000D      height  65px  x000D      width  65px  x000D      border-radius  50   x000D      border 1px solid red  x000D      line-height  65px  x000D      text-align  center  x000D    x000D   lt div class  circle  gt  lt span gt text lt  span gt  lt  div gt  x000D   x000D   x000D

User · Answer

There is not technically a way to draw a circle with HTML  there isn   t a  lt circle gt  HTML tag   but a circle can be drawn   The best way to draw one is to add border-radius  50  to a tag such as div  Here   s an example    lt div style  width  50px  height  50px  border-radius  50    gt You can put text in here      lt  div gt

[html] How to draw circle in html page?

Examples related to html

Examples related to css

Examples related to geometry

Examples related to css-shapes