Css circle with border radius

How to Add a Circle Around a Number in CSS

Adding a circle around a number can be easily done with CSS. This can be done using the border-radius property.

In this snippet, you can also find a way of adding a circle around numbers having one to four digits.

Now, we’ll show the process step by step.

Create HTML

html> html> head> title>Title of the document title> head> body> div class="circle">1 div> body> html>

Add CSS

• Set the border-radius to «50%».
• Specify the width and height of the element.
• Style the class using the background, border, and color properties.
• Center the number using the «center» value of the text-align property.
• Specify the font of the number.

.circle < border-radius: 50%; width: 34px; height: 34px; padding: 10px; background: #fff; border: 3px solid #000; color: #000; text-align: center; font: 32px Arial, sans-serif; >

Now we can see the full example.

Example of adding a circle around a number:

html> html> head> title>Title of the document title> style> .circle < border-radius: 50%; width: 34px; height: 34px; padding: 10px; background: #fff; border: 3px solid #000; color: #000; text-align: center; font: 32px Arial, sans-serif; > style> head> body> div class="circle">1 div> body> html>

Result

Next, we are going to show an example where we use circles around numbers with one to four digits. This example can be used for any amount of text and any size circle.

Here, we’ll use the line-height property. Note that the width and line-height properties must be of the same value.

Example of adding a circle around numbers with one to four digits:

html> html> head> title>Title of the document title> style> .circle < width: 120px; line-height: 120px; border-radius: 50%; text-align: center; font-size: 32px; border: 3px solid #000; > style> head> body> div class="circle">1 div> div class="circle">100 div> div class="circle">10000 div> div class="circle">1000000 div> body> html>

In our last example, we use -moz- and -webkit- prefixes with the border-radius property. Here, we also use the display property set to «inline-block» to represent the element as an inline-level block container.

Example of adding a circle around a number using the line-height property:

html> html> head> title>Title of the document title> style> span.circle < background: #e3e3e3; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; color: #6e6e6e; display: inline-block; font-weight: bold; line-height: 40px; margin-right: 5px; text-align: center; width: 40px; > style> head> body> span class="circle">1 span> body> html>

Источник

Как сделать элемент круглым на CSS

Содержимое, выходящее за границы контура в clip-path , невидно.

  
текст

  
текст

shape-inside : текст в круге

Текст выравнен так, что крайние слова не выходят за границу, обозначенную в shape-inside . Но на момент написания статьи нет поддержки браузерами.

  
текст

Можно установить безопасный отступ, зная формулу, позволяющую найти сторону квадрата через радиус описанной окружности: a = 2R : √ 2

  
текст

Можно нарисовать символ либо картинку в центре круга

  
текст

radial-gradient в background : круглый фон

Когда нужна круглая фоновая картинка.

  
текст

  
текст

radial-gradient в mask : наложить маску на HTML-элемент

  
текст

SVG в background : фоновое круглое изображение

То, что не поддаётся radial-gradient .

  
текст

Источник

How to Create Circles with CSS

There are many techniques used to create a circle. In our snippet, we’ll demonstrate some examples with the CSS border-radius property, as well as with the HTML and SVG elements.

The most common one is using the border-radius property. We just need to set the border-radius property to 50% on the needed element to create curved corners.

As you’ve already noticed, it’s quite easy. Now let’s start with creating HTML.

Create HTML

div circle1">div> div circle2">div>

Add CSS

• Set the border-radius to 50% for the “.circleBase”.
• Set the width, height, background, and border properties for the «circle1» and «circle2» classes separately.

.circleBase < border-radius: 50%; > .circle1 < width: 100px; height: 100px; background: #4bc475; border: 1px solid #000; > .circle2 < width: 150px; height: 150px; background: #a1a1a1; border: 1px solid #000; >

Now you can see the full example.

Example of creating circles using elements:

html> html> head> title>Title of the document title> style> .circleBase < border-radius: 50%; > .circle1 < width: 100px; height: 100px; background: #4bc475; border: 1px solid #000; > .circle2 < width: 150px; height: 150px; background: #a1a1a1; border: 1px solid #000; > style> head> body> div class="circleBase circle1"> div> div class="circleBase circle2"> div> body> html>

Result

The method that we used in the example above is the simplest one and has good browser support.

Now, let’s see an example, where we use elements within a . Here, we also specify the display as “inline-block” and add the text-align property set to “center” to the to align the circles to the center.

Example of creating circles using elements:

html> html> head> title>Title of the document title> style> .circle < height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; > div < text-align: center; > style> head> body> div> h1>Circles h1> span class="circle"> span> span class="circle"> span> span class="circle"> span> span class="circle"> span> div> body> html>

In our next example, we create a circular and place a text inside it.

Example of creating a circle with a text inside:

html> html> head> title>Title of the document title> style> #circle < background: #cfcfcf; width: 128px; height: 128px; border-radius: 64px; border: 2px solid #000; > #circle div < position: relative; left: 19px; top: 19px; width: 90px; height: 90px; color: #000; text-align: center; > style> head> body> div id="circle"> div>Example of a circular div div> div> body> html>

In the following example, we create a responsive circle. Here, we set a percentage width and border-radius for the container. Then, we add an empty block of padding-bottom to the :after pseudo-element. Thus we can have the same result of creating a container with equal width and height.

Example of creating a responsive circle:

html> html> head> title>Title of the document title> style> .rescircle < width: 20%; border-radius: 50%; background: #b5b5b5; > .rescircle:after < content: ""; display: block; padding-bottom: 100%; > style> head> body> div class="rescircle"> div> body> html>

Example of creating a circle with the SVG element:

html> html> head> title>Title of the document title> head> body> svg height="150" width="150"> circle cx="60" cy="60" r="50" stroke="blue" stroke-width="2" fill="lightblue" /> svg> body> html>

Example of creating a circle with the HTML element:

html> html> head> title>Title of the document title> head> body> canvas id="canvas" width="300" height="100"> canvas> script> var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); var centerX=canvas.width / 2; var centerY=canvas.height / 2; var radius=40; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle='lightgreen'; context.fill(); context.lineWidth=2; context.strokeStyle="green"; context.stroke(); script> body> html>

Try also creating circles and other geometric shapes with our tool called Geometric Images.

Источник