回答:
それ自体は円を描くことはできません。ただし、円と同じものを作成できます。
作成する円の幅/高さの半分でborder-radiusある（を介して）角が丸い長方形を作成する必要があります。
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
}<div id="circle"></div>border-radius: 50%;うまく使って見つけたので、必要に応じてサイズを変更します。色については、background-colorまたはを使用できますborder。
HTML 5ではかなり可能です。オプションは次のとおりです。埋め込みSVGと<canvas>タグ。
埋め込まれたSVGで円を描くには：
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>サークルイン<canvas>：
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()<canvas id="circlecanvas" width="100" height="100"></canvas>border-radius:50% コンテナが取得する任意の寸法に円を調整する場合（たとえば、テキストが可変長である場合）
-moz-と-webkit-接頭辞を忘れないでください！
2015年の時点で、わずか15行のCSSでテキストを中央に配置できます（Fiddle）。
body {
background-color: #fff;
}
#circle {
position: relative;
background-color: #09f;
margin: 20px auto;
width: 400px;
height: 400px;
border-radius: 200px;
}
#text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle with text</title>
</head>
<body>
<div id="circle">
<div id="text">Text in the circle</div>
</div>
</body>
</html>-webkit-sがなければ、これはIE11、Firefox、Chrome、Operaで動作し、有効なHTML5（実験的）およびCSS3です。
MS Edgeでも同じ（2020）。
border-radius属性を使用して、要素のborder-radiusと同等のborder-radiusを与えることができます。例えば：
<div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;"> </div>（-mozおよび-webkit拡張機能を使用する理由は、CSS3以前のGeckoおよびWebkitのバージョンをサポートするためです。）
このページには他にも例があります。テキストの挿入に関しては可能ですが、ほとんどのブラウザのボックスパディングモデルは依然として外側の四角形を使用するため、配置に注意する必要があります。
border-radius: 50%;サイズに関係なく、すべての要素を円に変えます。少なくとも、限り height と width ターゲットのは、それ以外の場合は、楕円形に変わります、同じです。
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}<div id="target"></div>注：ブラウザのプレフィックスがされていないボーダー半径のためにもはや必要
または、を使用clip-path: circle();して要素を円に変えることもできます。要素が大きいがあってもwidthよりheight（またはその逆）を、それはまだ、円、およびなりません楕円形。
#target{
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
}<div id="target"></div>注：クリップパスは（まだ）すべてのブラウザでサポートされているわけではありません
次の
ように、ターゲットのタグの内側にテキストを記述するだけで、テキストを円の中に配置できます。
<div>text</div>テキストを円の中央に配置したい場合は、次の操作を実行できます。
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
display: flex;
align-items: center;
}
#text{
width: 100%;
text-align: center;
}<div id="target">
<div id="text">text</div>
</div>スクリプトタグで次の操作を行うだけです。
<!Doctype html>
<html>
<head>
<title>Circle Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid
#d3d3d3;">
<body>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</body>
</html>そして、あなたはあなたがあなたのサークルを得ました。
.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;
} <head>
<style>
#circle{
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>シンプルで初心者:)
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->sassを使用してCSSを記述している場合は、次のことができます。
@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;
}どの出力：
.my-circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: red;
}ここで試してください：https : //www.sassmeister.com/