How to put a multicolor border around a circular image?
Sykes
I need to put a colored border around a circular image. Border example
I've tried various guides online but can't seem to get the hang of it.
I tried using a linear gradient, but I ended up with 4 points at the corners, as if the image were square with no borders.
.img-border1 {
border: 6px solid #e42c64;
border-radius: 50%;
}
.img-border2 {
border: 6px solid;
border-radius: 50%;
background-image: linear-gradient(red 33.33%, blue 33.33%, yellow 33.33%);
}<div class="col-lg-4">
<img class="img-res img-border1 rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">
<h2>My Simon Game</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="https://rbas30.github.io/simon-game/" role="button">Play the game »</a></p>
</div>
<div class="col-lg-4">
<img class="img-res img-border2 rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>destroy
Here is an example using more tags and pseudoelements :
.image-wrap {
position: relative;
padding: 6px;
border-radius: 50%;
width: 140px;
height: 140px;
box-sizing: border-box;
overflow: hidden;
background: blue;
z-index: 1;
background-clip: padding-box;
}
.image-wrap-inner {
overflow: hidden;
border-radius: 50%;
width: 128px;
height: 128px;
}
.image-wrap img {
position: relative;
z-index: 10;
top: -6px;
left: -6px;
}
.img-border-two::before {
content: '';
display: block;
height: 140px;
width: 140px;
background: green;
position: absolute;
top: 0;
left: 70px;
z-index: 2;
}
.img-border-three::before {
content: '';
display: block;
height: 140px;
width: 140px;
background: purple;
position: absolute;
top: 0;
left: 0;
z-index: 3;
transform: matrix(2, 1, 2, -1, 0, 140);
}
.img-border-three::after {
content: '';
display: block;
height: 140px;
width: 140px;
background: red;
position: absolute;
top: 0;
left: 70px;
z-index: 2;
}<div class="col-lg-4">
<div class="image-wrap img-border-two">
<div class="image-wrap-inner">
<img class="img-res rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">
</div>
</div>
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-lg-4">
<div class="image-wrap img-border-three">
<div class="image-wrap-inner">
<img class="img-res rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">
</div>
</div>
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>Precautions:
- This is not responsive, so your image will always be 140px x 140px.
- If you adjust the width/height or
paddingon.image-wrapof the image, you will also need to change the.image-wrap-innerwidthsumheightto account for padding/size changes.