CSS Circle with Border

Css circle with border that is hollow inside?

You can use poiner-events: none to delegate clicks and hovers to covered elements.
This works for all major browsers and for IE since version 11.

.inner-circle{

  display: inline-block;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  border-style: solid;

  border-width: 2px;

  border-color: blue;

  background-color: rgba(0, 0, 0, 0);

  position: absolute;

  top:0;

  left:0;

  pointer-events:none;

}

<input type="checkbox" />

<span class="inner-circle"></span>

css - circle with margin on border

I'd say to treat it like this:

Outer "border" - use a box shadow

Inner "margin" - use a white border

Inner area - use background color

All together you get:

.circle {

  background-color: #F80;

  border: 3px solid #FFF;

  border-radius: 18px;

  box-shadow: 0 0 2px #888;

  height: 30px;

  width: 30px;

}

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

Filling a circle border by percent

For first linear part, you can use linear-gradient:(270deg,...) for filling 50% of the circle.

For other linear part, you can increase the angle (270°+) to fill more than 50% of the circle (360° or 0° = 75% of the circle ... 90° = 100% of the circle)

For example: linear-gradient(270deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, lightgray 50%) combination creates a circle with a lightgray background, filled with seventy-five percent black color. (snippet below)

.circle {

  position: relative;

  top: 5px;

  left: 5px;

  text-align: center;

  width: 100px;

  height: 100px;

  border-radius: 100%;

  background-color: #ffffff;

}

.circle-border {

  position: relative;

  text-align: center;

  width: 110px;

  height: 110px;

  margin-left: 30%;

  border-radius: 100%;

  background-color: #E53B3B;

  background: linear-gradient(270deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, lightgray 50%)

}

<div class="circle-border">

  <div class="circle">

  </div>

</div>

CSS Circle border clipping around image

You can wrap the input in a div and add the border to the div instead. See what I did here:

input[type="image"]#yt {
    width: 16px;
}

#iconContainer {
    position: absolute;
    border: 4px solid rgba(227, 227, 228, 1);
    border-radius: 50%;
    margin-left: 254px;
    margin-top: 620px;
    padding-top: 17px;
    padding-bottom: 18px;
    padding-left: 15px;
    padding-right: 15px;
    overflow: visible;
}

<div id="iconContainer">
<input type="image" name="submit" src="http://www.clker.com/cliparts/1/9/e/4/13140637591549686593blue%20square.png" id="yt"> 
</div>

CSS circles - outer border with white space on inside of element

Use background-clip: content-box; so your background fills the content area only and set padding as a size of white space.

See the snippet below:

.status {

  display: block;

  width: 8em;

  height: 8em;

  border-radius: 100%;

  background-color: #2ed091;

  margin: 5px;

  border: 1px solid black;

  

  background-clip: content-box;

  padding: 1em;

}

<span class="status"></span>

Create a perfect circle with CSS

In order to achieve a perfectly round shape you'll need to have perfect square to begin with. So, for instance, your button will need to have dimensions like width: 32px; height: 32px. To turn a square into a circle you'll have to apply a border radius of 50% e.g. border-radius: 50%.

CSS circle - possible to add a transparent gap between border and background color?

You can achieve that with a pseudo element (.circle::after) and the following (or similar) settings:

.container {

  height: 100px;

  background: url('https://picsum.photos/536/354');

}

.circle {

  top: 20px;

  left: 20px;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: red;

  position: relative;

  box-sizing: border-box;

}

.circle::after {

  content: '';

  position: absolute;

  box-sizing: border-box;

  border: 3px solid red;

  border-radius: 50%;

  width: calc(100% + 16px);

  height: calc(100% + 16px);

  left: -8px;

  top: -8px;

}

<div class="container">

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

</div>

---

Related Topics