दो बॉर्डर वाला एक सर्कल कैसे बनाएं

दो बॉर्डर वाले सर्कल में एक डिव को जिम्मेदारी से स्टाइल करना सीएसएस के साथ पूरा किया जा सकता है। प्रदान किए गए मूल सर्कल डिव सीएसएस को वांछित प्रभाव बनाने के लिए संशोधित किया जा सकता है:

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  background: pink;
  border: 1px solid green;
  box-shadow: 0 0 0 5px red; /* Adds a second red border */
}

यहां, बॉक्स-छाया संपत्ति का उपयोग सर्कल के चारों ओर दूसरी सीमा बनाने के लिए किया जाता है। मान 0 0 0 5px छाया के ऑफसेट, धुंधलापन और प्रसार को परिभाषित करते हैं, जबकि लाल सीमा के रंग को निर्दिष्ट करता है।

प्रश्न में उल्लिखित आंतरिक div दृष्टिकोण को अंदर एक अतिरिक्त div के साथ कार्यान्वित किया जा सकता है सर्कल डिव:

आंतरिक div को पृष्ठभूमि रंग के साथ स्टाइल किया जा सकता है और flexbox का उपयोग करके लंबवत रूप से संरेखित किया जा सकता है:

div.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.inner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: blue;
}