How to make a circle in CSS without Border-Radius 100%?

Question

I can make a circle in css with border-radius.

.circle{
    border-radius:100%;
    border:10px solid red;
    width:100px;
    height:100px;
    background-color:purple;
}

<div class="circle"></div>

But I would like to know if there is another way, other than this, in CSS.

Answer 1

How about just using the background of the 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 surroundings, but third depends on whether the gradient with the bottom of the page.

Answer 2

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 you don’t have CSS there in the middle, but it is registered an option. SVG It’s pretty high right now, and this css-Tricks article shows a number of things that can be done with it. In fact, I recommend an analysis of the logo of this site, which has a very cool Egg Easter!

EDIT

The website’s logo no longer has the Easter Egg I commented on. =(

Answer 3

Outside border-radius and background if your desire is to really use in the images you can experience the clip-path:

Using clip-path: Circle

.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">

Using edge clip-path (simulated)

.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>

---

Support

According to the Caniuse support is still a bit limited, browsers with support:

• Firefox 52 (partial support)
• Firefox 55+
• Chrome 49 (partial prefix support)
• Chrome 60 (partial support - Opera uses the same technology as Chrome)
• Safari (partial support with prefix)

It is important to note that the MDN is still considered a experimental technology

Answer 4

I’ll give an answer that may be considered a little awkward, but as no rules have been put in unless it is with CSS and without border-radius there goes one more suggestion (even if "controversy")...

First you will need a very geometric font type a Future, that has the letter The as a perfect circle. Another detail, the more "thick" the stroke of the font the easier to make the effect, so the more Bold best

In my example I used a font in these requirements I found on Google Fonts a Montserrat

After that I just created some css styles for elements ::after I used to cover the "eyes" of the characters. Summarizing just use pseudo elements to plug the holes in the source and have the perfect circle and other forms...

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 https://caniuse.com/#feat=css-gencontent

Answer 5

<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:http://www.html5rocks.com/en/tutorials/shapes/getting-started/? redirect_from_locale=en