I can circle the css with border-radius .
.circle{
border-radius:100%;
border:10px solid red;
width:100px;
height:100px;
background-color:purple;
}<div class="circle"></div>However, I would like to know if there is any way other than CSS.
What about just using the background of CSS?
background: radial-gradient(ellipse at center,#f00 0%,#f00 0%,#f00 67%,rgba(0,0,0,0) 70%);
See in action:
#circulo1 {
background: radial-gradient(circle closest-side,#f00 0%,#f00 98%,rgba(0,0,0,0) 100%);
}
#circulo2 {
background: radial-gradient(circle closest-side,
#999 0%,#999 74%,#e00 76%,#e00 98%,rgba(0,0,0,0) 100%);
}
#circulo3 {
background:radial-gradient(circle closest-side,
rgba(0,0,0,0) 0%,rgba(0,0,0,0) 78%,#fff 80%,#fff 94%,
#36f 96%,#36f 99%,#fff 100%),
url(https://i.stack.imgur.com/MVmIb.png) no-repeat center/160px 160px;
}
body {background-color:#fff}
div {width:160px;height:160px;float:left;margin:10px}<div id="circulo1"></div>
<div id="circulo2"></div>
<div id="circulo3"></div>Note that the first two have transparency in the environment, but the third one depends on whether you hit the gradient with the page background.
If SVG is an option
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> I know I do not have CSS in the middle, but an option is registered. SVG is currently up, and this css-tricks article shows a number of things that can be made with it. In fact, I recommend an analysis of the logo of this site, which has a pretty easter egg!
EDIT
The logo of the site no longer has the easter egg I commented. = (
Out border-radius and background if your wish is to actually use in the images you can try clip-path :
.arredondar {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}<img class="arredondar" src="https://i.stack.imgur.com/ShnZP.png?s=328&g=1">.arredondar {
display: inline-block;
background-color: #f00;
padding: 25px;
font-size: 0; /*remove "white spaces"*/
}
.arredondar, .arredondar img {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}<div class="arredondar"><img src="https://i.stack.imgur.com/ShnZP.png?s=328&g=1"></div>Asthe CanIUse support is still somewhat limited, browsers are supported:
It's important to note that MDN is still considered experimental technology
I'm going to give you an answer that may be considered a little clumsy, but since no rules have been set unless it's CSS and no border-radius it's one more suggestion (even if "controversial") .. .
First you'll need a well-geometric font type Future , which has the letter O as a perfect circle. Another detail, the "thicker" the font trait the easier to make the effect, then the more Bold
In my example I used a font in those requirements that I found in Google Fonts at Montserrat
After that I just created some css styles for :: after elements that I used to cover the "eyes" of the characters. In short, just use pseudo elements to fill the holes in the font and have the perfect circle and other shapes ...
See the result in the example:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: azure;
}
.container {
position: relative;
z-index: 1;
}
.texto {
font-family: 'Montserrat', Verdana, sans-serif;
font-weight: bold;
color: red;
font-size: 10rem;
position: relative;
text-transform: uppercase;
}
.texto-o::after, .texto-p::after, .texto-a::after {
content: "";
position: absolute;
background-color: red;
z-index: -1;
}
.texto-o::after {
top: 30%;
left: 25%;
width: 50%;
height: 45%;
}
.texto-p::after {
top: 30%;
left: 20%;
width: 60%;
height: 25%;
background-color: rgba(255,0,0,0.75);
}
.texto-a::after {
top: 30%;
left: 35%;
width: 30%;
height: 35%;
background-image: url(http://unsplash.it/40/40);
}<link href="https://fonts.googleapis.com/css?family=Montserrat:400,900" rel="stylesheet">
<div class="container">
<span class="texto texto-o">o</span>
<span class="texto texto-p">p</span>
<span class="texto texto-a">a</span>
<span class="texto">!</span>
</div>OBS: works from IE8 up link
<img class=”element” src=”image.png” />
<p>Lorem ipsum…</p>
<style>
.element{
shape-outside: url(image.png);
shape-image-threshold: 0.5;
float: left;
}
</style>
Source: link