circle with text

How to draw circle in html page?

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.

On second thought, you may want to stick a   inside that

I think this answer is wrong as it says you can’t draw a circle in HTML5. Canvas is a HTML5 element though and you CAN draw a circle in HTML5 (w3schools.com/html/html5_canvas.asp)

use -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; this way you need only to cusomize width and height to apply your changes in future

I found using border-radius: 50%; worked well, change the size as desired. For colour you can use background-color or border .

It is quite possible in HTML 5. Your options are: Embedded SVG and tag.

To draw circle in embedded SVG:

var canvas = document.getElementById("circlecanvas"); var context = canvas.getContext("2d"); context.arc(50, 50, 50, 0, Math.PI * 2, false); context.fillStyle = "red"; context.fill()

There are a few unicode circles you could use:

You can overlay text on the circles if you want to:

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.

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)

As of 2015, you can make it and center the text with as few as 15 lines of CSS (Fiddle):

       
Text in the circle
 
  

Without any -webkit- s, this works on IE11, Firefox, Chrome and Opera, and it is valid HTML5 (experimental) and CSS3.

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.

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.

You can place text inside of the circle, simply by writing the text inside of the tags of the target,
like so:

If you want to center text in the circle, you can do the following:

There is not technically a way to draw a circle with HTML (there isn’t a 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:

The followings are my 9 solutions. Feel free to insert text into the divs or svg elements.

1. border-radius
2. clip-path
3. html entity
4. pseudo element
5. radial-gradient
6. svg circle & path
7. canvas arc()
8. img tag
9. pre tag

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();

#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

1 border-radius
 
2 clip-path
 
3 html entity
 
⬤
 
4 pseudo element
 
5 radial-gradient
 
6 svg circle & path
  
7 canvas arc()
 
8 img tag
     <img src="https://stackoverflow.com/questions/6921792/circle.png" width="100" height="100" /> 
9 pre tag
 
+++ +++++ +++++++ +++++++++ +++++++++++ +++++++++++ +++++++++++ +++++++++ +++++++ +++++ +++
 
 
 
You can use the border-radius attribute to give it a border-radius equivalent to the element’s border-radius. For example:
 
(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.
 
Источник
 
Draw Circle using css alone [duplicate]
 
Is it possible to draw circle using css only which can work on most of the browsers (IE,Mozilla,Safari) ?
 
6 Answers 6
 
Yep, draw a box and give it a border radius that is half the width of the box:
 
IE8 does not support border-radius, so that makes sense. Great idea for modern browsers though, very cool.
 
Instead of supporting IE8 please ask your clients if you can show a message telling the user to upgrade their browser. It will benefit everyone, and Microsoft recommends it. Google even discontinued IE8 support in their web apps (Gmail, Calendar, Drive, Docs, etc.) at the end of 2012. It’s ridiculous to support a 5 year old browser.
 
use a polyfille for ie8 css3pie.com and use border-radius:100%; for responsive circle use padding-bottom:40%; width:40%; height:0; overflow:visible;
 
You could use a .before with a content with a unicode symbol for a circle (25CF).
 
I suggest this as border-radius won’t work in IE8 and below (I recognize the fact that the suggestion is a bit mental).
 
:before doesn’t work in IE7 and below, so this method only gains support for IE8 but makes it very hard to position the circle correcly. For example, font-size of 200px doesn’t equate to a circle with a diameter of 200px and you lose antialiasing on some systems.
 
Given that at this point, IE 8 is nearly 10 years old, this should no longer be the accepted answer. It is reasonable to drop support for it, as according to caniuse.com/usage-table, IE 8 currently has a 0.18% share of usage, and most modern websites have done so. The border-radius property is now supported pretty much across the board (caniuse.com/#search=border-radius), so should be the accepted answer.
 
is there a way to appease the SEO gods, even if i use an image of circular text, instead of rotating each letter?
 
Источник
 
How to make a circle around content using CSS?
 
 
Like this With only this code
 
5 Answers 5
 
Because you want a circle, you need to set the same value to width, height and line-height (to center the text vertically). You also need to use half of that value to the border radius.
 
This solution always renders a circle, regardless of content length.
 
But, if you want an ellipse that expands with the content, then http://jsfiddle.net/MafjT/256/
 
Resize with content — Improvement
 
In this https://jsfiddle.net/36m7796q/2/ you can see how to render a circle that reacts to a change in content length. 
You can even edit the content on the last circle, to see how the diameter changes.
 
Adding: pure css info icon to be found easier by SE. I searched a while and finally found your great css solution when searching «css text around circle».
 
It doesn’t work for inline elements such as Click on i for info where display:block has been changed to display:inline so that it can flow as part of the text. Any idea how to work with this?
 
The last example (jsfiddle.net/36m7796q/2) doesn’t render correctly in Firefox 50 for me. I get an oval shape rather than a circle.
 
@leeb Replace the display: inline-flex with display: inline-block in Firefox. This fixes the problem but causes the text not to be vertically centered.
 
@JoseRuiSantos yes this works, but as you say it does not result in the exact same result. I’ve come to the conclusion that the best way is to use a fixed width/height element, and hope the content isn’t too long 😉
 
This did not render as a circle in my case but more like rounded left and right and flat top and bottom. Your html may vary.
 
You have many answers now but I try tell you the basics.
 
First element is inline element so giving it margin from top we need to convert it to block element. I converted to inline-block because its close to inline and have features of block elements.
 
Second, you need to giving padding right and left more than top and bottom because numerals itself extend from top to bottom so it gets reasonable height BUT as we want to make the span ROUND so we give them padding more on left and right to make room for BORDER RADIUS.
 
Third, you set border-radius which should be more than PADDING + width of content itself so around 27px you will get required roundness but for safely covering all numerals you can set it to some higher value.
 
Источник
 
circle()
 
The circle() CSS function is one of the data types.
 
Try it
 
Syntax
 
shape-outside: circle(50%); clip-path: circle(6rem at 12rem 8rem); 
 
Values
 
Uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension.
 
Uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the closest side in any dimension.
 
Moves the center of the circle. May be a , or a , or a values such as left .
 
Examples
 
Basic circle
 
In the example below, the shape-outside property has a value of circle(50%) , which defines a circle on a floated element for the text to flow round.
 
Specifications
 
Browser compatibility
 
BCD tables only load in the browser
 
See also
 
Found a content problem with this page?
 
This page was last modified on Jul 18, 2023 by MDN contributors.
 
Your blueprint for a better internet.
 
MDN
 
Support
 
Our communities
 
Developers
 
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
 
Источник
 
Читайте также:  SVG-графика