Tips for adding additional borders to an already present circle perimeter

To achieve a semi-transparent circle in CSS, I'm using border-radius: 50%; along with 

border: 400px solid rgba(255, 255, 255, .5);
.

My goal is to add an additional border around this circle that is completely transparent (let's say 10 pixels), followed by another border of the same size that is semi-transparent.

This is my current setup for creating the circle:

div.circle {
  background: rgba(255, 255, 255, .5);
  height: 400px;
  width: 400px;
  border-radius: 50%;
  margin: auto;
  margin-top: 10px;
}
<div class="circle"></div>

How can I go about adding another border around the existing one and then yet another border?

cssborder

Answer №1

To achieve a transparent effect in the padding area, you can use a simple border and clip the background to the content-box:

div.circle {
  background: rgba(255, 255, 255, .5) content-box;
  padding: 10px;
  height: 180px;
  width: 180px;
  box-sizing: border-box;
  border-radius: 50%;
  margin:10px auto;
  border: 10px solid rgba(255, 255, 255, .5);
}

body {
  background: pink;
}
<div class="circle"></div>

Another option is to utilize radial-gradient for the same effect:

div.circle {
  background: 
    radial-gradient(farthest-side, 
      rgba(255, 255, 255, .5) calc(100% - 20px),transparent calc(100% - 20px),
      transparent calc(100% - 10px),rgba(255, 255, 255, .5) calc(100% - 10px));
  height: 180px;
  width: 180px;
  box-sizing: border-box;
  border-radius: 50%;
  margin:10px auto;
}

body {
  background: pink;
}
<div class="circle"></div>

This technique can be easily customized to have multiple layers of borders as needed:

div.circle {
  background: 
    radial-gradient(farthest-side,
      #fff        calc(100% - 61px),transparent calc(100% - 60px), 
      transparent calc(100% - 51px),#fff        calc(100% - 50px),
      #fff        calc(100% - 41px),transparent calc(100% - 40px),
      transparent calc(100% - 31px),#fff        calc(100% - 30px),
      #fff        calc(100% - 21px),transparent calc(100% - 20px),
      transparent calc(100% - 11px),#fff        calc(100% - 10px));
  height: 180px;
  width: 180px;
  box-sizing: border-box;
  border-radius: 50%;
  margin:10px auto;
}

body {
  background: pink;
}
<div class="circle"></div>

Answer №2

To achieve the desired effect, you can utilize the ::before and :after pseudo elements in the provided snippet. I have included both in the code, but depending on your specific needs, using only one may be sufficient:

(Update: I have adjusted the positioning parameters to center the pseudo elements. This modification allows for easier customization by simply adjusting the height and width values for different dimensions)

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #7a4;
}

div.circle {
  background: rgba(255, 255, 255, 0.5);
  height: 400px;
  width: 400px;
  border-radius: 50%;
  margin: auto;
  margin-top: 100px;
  position: relative;
}

.circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 440px;
  width: 440px;
  border-radius: 50%;
  border: 20px solid;
  border-color: rgba(255, 255, 255, 0.5);
}

.circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 520px;
  width: 520px;
  border-radius: 50%;
  border: 20px solid;
  border-color: rgba(255, 255, 255, 0.5);
}
<div class="circle"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Section with relative positioning has taken an unexpected position

I'm facing a rather basic issue with positioning a relative div on my webpage. My layout consists of an absolute header that is 100vh tall, containing a headline and caption. Below the header, I have two section elements, both set to a relative posit ...

htmlcsscss-positiondisplay

Video sections that adjust dynamically to fill the entire height and width of the screen without relying on the position:fixed property

My goal is to design a single-page website with multiple sections, each featuring a video that spans the height and width of the viewport (100vh and 100vw). These videos should stack on top of each other, filling the entire browser window. While I've ...

htmlcssbackground

The React application ceases to function properly as soon as I introduce a textfield

As a newcomer to React, I am facing an issue while working on the front-end UI of a web application. Whenever I try to add a text field to the box I created, the app fails to render anything other than a blank color on the screen. Here is how it looks: W ...

htmlcssreactjsmaterial-ui

Not every image is contained within a DIV element

My current challenge involves wrapping an img element with a div. The issue I am facing is that the image is loading to the left of the div. I have already set the dimensions of the div to match those of the image, but it still loads incorrectly. I've ...

csshtml

I am experiencing issues with the interpolation of my SASS variables when they are placed into

I am relatively new to the Nuxt ecosystem and I must say it's an awesome package that really simplifies our lives. Currently, I am attempting to incorporate sass into my project. Despite following the steps outlined in the documentation, my build is ...

cssvue.jssassnuxt.js

Achieving Perfect Alignment in Bootstrap Containers

My form is not aligned in the center of my page. Below is my HTML file and the resulting output. How can I center my view? https://i.sstatic.net/mqXr8.png Here is the code snippet from my HTML: <div class="container"> <div class='row justi ...

cssbootstrap-4

How can I make a CSS transition activate only on width increases, not decreases?

My element's width changes under different conditions, and I've implemented CSS with a transition for the width: .element-class { transition: width 500ms ease 0ms; } However, I only want the transition to occur when the width is decreasing. ...

csscss-transitions

The compilation of SCSS CSS is encountering an error with the provided CSS code

Upon compiling SCSS, I encountered an error with the following CSS: span.icon-hcp { filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='../images/icon-hc.jpg', sizingMethod='scale') !important; -ms-filter: ...

htmlcsscompiler-errorssass

Fixed positioning on scroll on the right side

I need assistance to create a fixed right side with scrollable content on the left. I attempted using position: fixed for the left div but it didn't work as expected. Can someone please assist me with this? Link to the product ...

jquerycss

showing divs in a compact layout on smaller screens using Bootstrap 5

Is there a way to set up two div elements so that they are displayed as blocks on small screens and inline on large screens? I also need their width to span 100% of the screen. ...

cssbootstrap-5

Disallow standard click behavior if a specific class is present elsewhere on the webpage

My CSS code triggers a dropdown menu to open when the .dashboard-actions class is clicked. When the user clicks, the class of the 2nd div in the tree changes to "dropdown open", indicating that the dropdown menu is visible. Clicking off the menu removes th ...

javascriptjqueryhtmlcssangularjs

Position a <div> element in the center of another <div> element

Link to code: https://jsfiddle.net/z4udfg3o/ My goal is to center the "caixa" divs within the "produtos" div. Initially, I achieved this by using exact values with margin-left. However, I now want it to be responsive across different screen sizes, so I ha ...

htmlcss

Split the list items based on their heights if they exceed the height of the unordered list

I'm exploring ways to transform dynamic content into slides. Essentially, I have a <ul> element that is sized 300x100 pixels. As the list items within it exceed the height of the <ul>, I aim to group these overflowing items into divs, crea ...

jqueryhtmlcss

Shift heading 1 as well as heading 2 to the image's right side

Is it possible to position <h1> and <h2> to the right of an image while ensuring that <h2> is displayed below <h1>? Any suggestions on how I can achieve this layout? This is my current code <html> <link rel="stylesheet" h ...

htmlcss

Picture escapes the div in a hurry

I mistakenly placed the yellow dot "gif1" outside of the black box "gif" instead of inside. How many errors can you spot in my code? Take a look at the Livewave Preview to see the current state of the design. I have attempted to fix this issue by using o ...

htmlcss

Troubleshooting problem with Django Material's navigation bar

Currently, we are utilizing Django Material (MaterializeCSS as CSS framework) for a new project in progress. We have encountered an issue with the language selector located in the admin navbar. Interestingly, this problem only occurs in Firefox and not in ...

cssdjangodjango-adminmaterialize

Arrange containers into a tower?

Currently, I am exploring the concept of stacking boxes. While I have a solid grasp on how to stack them vertically from top to bottom, I find myself puzzled about how to stack them horizontally. Check out my vertical stacking method here See how I a ...

htmlcss

Issue with Element Height Rendering in Chrome

I'm having trouble adjusting the height of the Div in this theme to 156px. It seems to be inheriting a CSS property from another source which is setting it to 118px instead. Please visit the following website in Chrome and Firefox to see the differe ...

csspropertiesheight

What purpose does the asterisk have in CSS?

Similar Question: Understanding the star-preceded property in CSS I recently came across a CSS file for a jQuery script and discovered the following code snippet: .usual div { *margin-top:-15px; clear:left; background:snow; font:10pt Georgia; ...

csssyntax

What is the method for creating a transparent background for Material UI v1.0 Dialogs?

I'm attempting to place a CircularProgress component inside a dialog box. However, I'm facing an issue where the background of the dialog box is white and cannot be set to transparent like in previous versions of Material UI (v0.2). style={{ ...

cssreactjsdialogmaterial-ui