Is there a way to achieve three distinct outlines on a circular div simultaneously?

Here is the code I have been working on. My goal is to apply three different levels of outlines to a single div element. I successfully added borders for the first level and shadows for the second.

Is it possible to add a third level using only CSS? I know I could achieve this by introducing another nested div, but I am interested in finding a solution that involves just one div.

#sample {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: #f1f1f1;
  border: 4px solid #ccc;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1);
  -moz-box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1);
  box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1);
}
<div id="sample">
</div>
htmlcss

Answer №1

Enhance your design with multiple shadows.

.design {
  box-shadow: 0 0 0 1px red,
              0 0 0 2px yellow,
              0 0 0 3px green;
}
<div class="design">Design</div>

<br><br>

<div class="design" style="border-radius: 20px;">Rounded Design</div>

Answer №2

Explore this alternative if you're interested in adding a see-through inner circle

body {
  background: red;
  background-image: url(http://lorempixel.com/image_output/abstract-q-c-640-480-10.jpg);
}
#sample {
  box-sizing: border-box;
  height: 100px;
  width: 100px;
  margin: 1em auto;
  border-radius: 50%;
  background: #f1f1f1;
  box-shadow: 0px 0px 0px 10px rgba(68, 68, 68, 1);
  /* outer ring */
  border: 10px solid #ccc;
  /* inner 'ring */
  padding: 10px;
  /* really inner ring */
  background-clip: content-box;
}
<div id="sample">
</div>

Answer №3

Not quite as refined as the solution from Fez Vrasta, but how about trying out a different approach using the :after pseudo element:

#sample {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: #f1f1f1;
  border: 4px solid #ccc;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1);
  -moz-box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1);
  box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1);
  position: relative;

}
#sample:after {
  border: 4px solid red;
  border-radius: 50%;
  content: " ";
  width: 114px;
  height: 114px;
  display: block;
  position: absolute;
  left: -11px;
  top: -11px;
}
<div id="sample">
</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

Utilizing Bootstrap to create a responsive design with a full-height view on the body,

While adjusting the page width in Chrome dev tools, I noticed that the page also increases vertically. It appears that Bootstrap is assuming a viewport height larger than what it actually is. Here is the relevant code snippet: <!DOCTYPE html> <ht ...

htmlcssflexboxbootstrap-5dynamic-resizing

Creating interconnected circles with lines utilizing canvas

I am currently utilizing the canvas tag to generate circles on a world map image. My objective is to link these multiple circles with lines using the Canvas tag. Although I have successfully drawn the circles, I am facing difficulty in drawing the connecti ...

javascriptcsshtmlcanvas

What is the best way to eliminate the selected text while moving/grabbing an element?

I'm facing an issue with removing the background text image when dragging elements. I have tried troubleshooting but haven't found a solution yet. For reference, I looked at this link: HTML5 Drag and Drop anywhere on the screen function drag_sta ...

javascripthtmlcss

After the decimal point, there are two digits

My input field is disabled, where the result should be displayed as a product of "Quantity" and "Price" columns ("Quantity" * "Price" = "Total"). However, I am facing an issue where the result often displays more than 2 digits (for example: 3 * 2.93), desp ...

javascriptjqueryhtml

How can I retrieve array responses for multiple HTML elements using a single AJAX call in PHP with Ajax post?

See page <button id='comparison_button'>Compare</button> <div id="sourceResponse"></div> <div id="destResponse"></div> <div id="missingResponse"></div> JS $(document).ready(function(){ $(&apo ...

phpjqueryhtmljsonajax

The layout of the keyboard in Cordova has been altered

Just starting out with my first Cordova app and I'm working on a simple login form. The issue I'm facing is that whenever I click on an input element, the keyboard pops up and completely messes up my layout, which should be straightforward. Has ...

javascripthtmlcsscordova

Conceal the elements of Widget Style by using jQuery to target the ul

My task involves creating a widget style using HTML's ul tag. <div class='tabs' style='width:50%'> <ul> <li id="basic-li"><a href='#basic_information'>Basic</a></li> <li id="mas ...

javascriptjqueryhtmlcsswidget

Creating a dynamic layout by combining Flexbox CSS and Bootstrap for optimal responsiveness

After trying out various responsive layouts for desktops, tablets, and mobile phones, I've encountered a challenge with the current design below. Initially, I utilized a grid layout from Bootstrap, but as the width decreases, the second column shifts ...

csstwitter-bootstrapflexboxbootstrap-5

reducing the size of the text field

Is there a way to adjust the height of the text box? So far, modifying the style sheet hasn't worked. Below is my code along with the corresponding style sheet. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css ...

htmlcssbootstrap-4

What is the reason for WordPress theme CSS and JS files loading after the head tag?

I'm experiencing an issue where my Wordpress theme's CSS and JS files are loading after the head tag. Additionally, when I view the source in Firefox, they are showing up in red, indicating incorrect markup. Can anyone help me figure out what&ap ...

javascriptcsswordpresslinker-errors

Designing exquisite button navigation

Hey everyone, I'm currently working on creating a circular button navigation for my website. I want to have 4 buttons, each with a different color, and I want them to glow when the user hovers over them. So far, this is what I have in my HTML: HTML: ...

htmlcss

What is causing Angular to consistently display the first object in the array on the child view, while the child .ts file correctly prints information from a different object?

Once a card of any object is clicked, the information of that specific object will be printed to the console. However, the child view will only display the details of the first object in the array it retrieves from. All pages are included below. A visual e ...

htmlangulartypescriptparent-child

The URL requested exceeds the maximum length limit in asp.net, causing a 414 error

I encountered the issue of receiving an "HTTP Error 414. The request URL is too long." While reading through this article, I learned that it is caused by an excessively lengthy query string: Currently in my web.config, I have set maxQueryStringLength to " ...

c#htmljquery

Just beginning my journey with coding and came across this error message: "Encountered Uncaught TypeError: Cannot read property 'value' of null"

As a newcomer to the world of coding, I am excited about working on a side project that allows me to practice what I am learning in my courses. My project so far is a temperature calculator that incorporates basic HTML and JS concepts. My goal is to improv ...

javascripthtml

Tips for connecting a href to a div id using JQuery for a parallax slider

I'm currently working on the jQuery slider known as Sequence Master Parallax. My goal is to incorporate a menu at the top that allows users to navigate to each slide. However, I am encountering difficulties in linking the href to the div id. I am unsu ...

javascriptjqueryhtmlcssslider

The upload functionality in Codeigniter seems to be malfunctioning

I am currently developing a content management system using Codeigniter. I am facing an issue with uploading files from the system. Although I am able to receive the file, the do_upload method seems to be not functioning correctly. I have looked for soluti ...

javascriptphphtmlcodeigniter

Extract the image URL from the href attribute using Xpath

My goal is to extract all images enclosed in href attributes from the given code snippet <div class="jcarousel product-imagethumb-alt" data-jcarousel="true"> <ul> <li> <a href="https://domain/imagefull.jpg" onclick="return false;" cla ...

javascripthtmlcssxpath

"Incorporating a variety of images in a random order with

Wanting to create a fun game on my website using JavaScript, where hotdogs are added to a bowl in random positions forming a pyramid-shaped pile that eventually covers the entire page. However, I'm facing some challenges with the implementation. The ...

javascripthtmlcss

Struggling to remove the translucent effect when hovering over the share button

I have been struggling with a seemingly simple issue for a few hours now. On my website, I have some share buttons located at . Although I want these buttons to remain completely black when hovered over, they are inexplicably becoming slightly transparen ...

htmlcsshyperlinkhover

The cache feature seems to be malfunctioning, resulting in images having to be reloaded every time

I am working on a simple webpage at . The issue I'm encountering seems to be specific to Google Chrome - every time I reload the page, the images are reloaded as if there is no cache. I noticed that when checking the example on stackoverflow.com, the ...

phphtmlgoogle-chromebrowser-cache