I want to place icon with rounded borders with different border color. Linked the image as I want. I designed rounded corners using tailwind css class, I am not getting how to give different border color.

enter image description here

CodePudding user response：

Here is a really simple example using two div elements.

.outer {
  height: 100px;
  width: 100px;
  background: linear-gradient(blue, purple);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {
  height: 90px;
  width: 90px;
  background-color: white;
  display: block;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div >
  <div >F</div>
</div>
<p>Facebook</p>

JSFiddle