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.
 
Источник
 
Как сделать элемент круглым на CSS
 
Содержимое, выходящее за границы контура в clip-path , невидно.
 
  
текст
 
  
текст
 
shape-inside : текст в круге
 
Текст выравнен так, что крайние слова не выходят за границу, обозначенную в shape-inside . Но на момент написания статьи нет поддержки браузерами.
 
  
текст
 
Можно установить безопасный отступ, зная формулу, позволяющую найти сторону квадрата через радиус описанной окружности: a = 2R : √ 2 
 
  
текст
 
Можно нарисовать символ либо картинку в центре круга
 
  
текст
 
 radial-gradient в background : круглый фон
 
Когда нужна круглая фоновая картинка.
 
  
текст
 
  
текст
 
 radial-gradient в mask : наложить маску на HTML-элемент
 
  
текст
 
SVG в background : фоновое круглое изображение
 
То, что не поддаётся radial-gradient .
 
  
текст
 
Источник
 
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.
 
Источник
 
Creating circular shapes using CSS
 
An example is provided in CSS and HTML. Solution 3 involves a demo, with CSS and HTML. To show one line of text vertically centered, Solution 1 suggests setting a value for «Setting a» that is equal to the height of the div. Solution advises using a square element with identical width and height, plus padding, instead of the previous element. This square element should have a background-image applied to it with CSS and HTML.
 
How to make a div with a circular shape? [duplicate]
 
To create a circle, one can employ a border-radius of 50%. Here’s an illustration:
 
How to make a div with a circular shape? [duplicate], Use a border-radius property of 50%. So for example: .example-div < border-radius: 50% >.
 
Make Rounded Corners, Circle & Oval Shapes in CSS
 
Learn how to make circles, ovals, and rounding the corners of HTML elements with the CSS Duration: 3:59
 
 
 
How to Draw a Circle with CSS | How to Draw CSS Shapes-Tutorial 2
 
In today’s tutorial, you will learn how to create a circle shape with CSS.About the Series Duration: 2:03
 
 
 
How To Create Rounded and Circular Images With CSS
 
Today, I’m going to show how to create rounded and circular images using html and css. If 
Duration: 3:46 
 
 
 
How to draw a circle with text in the middle?
 
To display a single line of text that is vertically centered, the value of line-height should be set equal to the height of the div. In the current case, both the height and line-height are set to 500px.
 
Example
 
If you are uncertain about the height of your content and it needs to wrap, this approach is highly recommended.
 
Utilizing flexbox allows for the implementation of CSS3.
 
 
Here is some text in circle
 
 
This feature enables you to center-align text both vertically and horizontally, regardless of whether it is a single line or multiple lines.
 
body < margin: 0; >.circles < display: flex; >.circle-with-text < background: linear-gradient(orange, red); justify-content: center; align-items: center; border-radius: 100%; text-align: center; margin: 5px 20px; font-size: 15px; padding: 15px; display: flex; height: 180px; width: 180px; color: #fff; >.multi-line-text
 
 
 
Here is some text in circle
 
Here is some multi-line text in circle
 
 
How to draw circle in html page?, 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
 
How to draw circle in HTML page?
 
To create a circular shape on an HTML page, you have several options. One way is to utilize SVG or canvas, while another option involves using CSS and the border-radius attribute.
 
 
 
Example
 
Experimenting with the given code can teach you the process of drawing a circle in HTML.
 
How to draw a circle with text in the middle?, If you can make border-radius:50%; that makes your code event more elegant and portable, without having to change this attribute each time based
 
Make perfect round circle on image [duplicate]
 
Instead of using the img element, you have the option to create a div element that has equal width and height, forming a square. You can then add border-radius: 50% and use that as the background-image. Finally, apply background-size: cover and background-position: center to complete the process.
 
Css circle border Code Example, round border . The CSS syntax used to make the rounded borders, or rounded corners around an element? two vertical borders are display
 
Источник