CODEWITHSUNDEEP
htmlcssbordercss-shapes
Saad Bhutto
Saad Bhutto

Reputation: 604

CSS circle with double border

I just received the PSD from Designer and most of the parts are achievable via CSS, there is only one single bit I am trying to do and seems hard to me is a circle with 2 borders. I can use bg image approach, but it would be ideal to achieve using CSS3.

One of the major reason for using CSS is the same border is been used on several different elements.

enter image description here

Upvotes: 1

Views: 2216

Answers (3)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

You can use a single element with box-shadow - CSS | MDN

enter image description here 

button{
  position:relative;
  margin: 20px auto;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom: none;
  border-top: none;
  width: 100px;
  height: 100px;
  color: red;
  box-shadow: -1px -1px currentcolor, 
               1px 1px currentcolor,
               
               inset -1px 1px currentcolor, 
               inset 1px -1px currentcolor;
  display: block;
  background-color: #fd999952;
  background-clip: padding-box;
  font-weight: bolder;
  outline: none;
}
<button type="button" class="btn">Register</button>

Upvotes: 1

Elvin Mammadov
Elvin Mammadov

Reputation: 1120

You can try :after to make 2 border for circle:

.green{
  width: 300px;
  height: 300px;
  background-color: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle {
  position: relative;
  width: 150px;
  height: 150px;
  border: 1px solid #fff;
  border-radius: 50%;
}

.circle::after {
  content: '';
  width: 150px;
  height: 150px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: block;
  margin: -4px 2px;
}
<div class="green">
  <div class="circle"></div>
</div>

Upvotes: 3

Mohammad Usman
Mohammad Usman

Reputation: 39322

You can use ::before or ::after pseudo element to create this shape:

.btn-holder {
  background: darkgreen;
  padding: 30px;
}

.btn {
  background: transparent;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #fff;
  display: flex;
  height: 100px;
  width: 100px;
}

.btn,
.btn::after {
  border: 1px solid #fff;
  border-radius: 100%;
}

.btn::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: -4px;
}
<div class="btn-holder">
  <button type="button" class="btn">Register</button>
</div>

Upvotes: 7

Related Questions