Question 246143 in Html Question posted in
Some basic documentation can be found here.

Html – Dashed border with image

I have a button with a kind of dashed border all around.

enter image description here

I would like to reproduce this same kind of dashed border effect on some other elements like flags. But this time I would like this dashed border to be in the same color as the flag. This is not as easy as I expected because the flag can have different colors on different area. So each dash should respect the color of the flag. Example with the flag below.

Maybe an image border should do the trick (the image of the flag itself used as border-image-source) but I don’t know how to proceed.

enter image description here

.btn {
    background-color: black;
    border-radius: 50px;
    color: white;
    border: 1.5px dashed white;
    text-decoration: none;
    padding: 10px 15px;
    display: inline-block;
}
<a href="/contact" class="btn btn-outline-primary">Get In Touch</a>

My attempt:

.btn {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 4px dashed transparent;
  border-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/United-kingdom_flag_icon_round.svg/800px-United-kingdom_flag_icon_round.svg.png) 30 30 round;
  border-image-slice: 1;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/United-kingdom_flag_icon_round.svg/800px-United-kingdom_flag_icon_round.svg.png" class="btn">
Tags:

2

Answers


  1. 0

    You can do this by overlaying the element with an after pseudo element that has the dashed border with the same basic background color (in this case, white).

    Note, the image given does not have the flag centered so is not usable. This snippet uses a ‘whole’ flag and creates the circle with a border-radius.

    While this seems to answer the question as set, the effect is a bit IMO weird and I wonder if it is really what is required when there are diagonal stripes as in the union jack. The effect would be less noticable on simpler flags which do not have these types of stripe.

    <style>
  .flag {
    width: 50vmin;
    height: 50vmin;
    border-radius: 50%;
    background-image: url(https://i.stack.imgur.com/642Gu.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    rborder: dashed black 1vmin;
    position: relative;
  }
  
  .flag::after {
    content: '';
    position: absolute;
    width: calc(100% + 2px);
    aspect-ratio: 1;
    top: -1px;
    left: -1px;
    border-radius: 50%;
    border: dashed white 2vmin;
    box-sizing: border-box;
  }
</style>
<div class="flag"></div>
    Login or Signup to reply.
  2. 0

    You can use mask and you won’t need extra markup and you can have transparency as well

    .btn {
  --n: 16; /* control the dashes*/

  width: 250px;
  aspect-ratio: 1;
  border-radius: 50px;
  -webkit-mask:
    repeating-conic-gradient(#000 0 calc(50%/var(--n)),#0000 0 calc(100%/var(--n))),
    radial-gradient(#000 60%,#0000 0); /* adjust the 60% to control the thickness */
}


body {
  background: pink;
}
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/United-kingdom_flag_icon_round.svg/800px-United-kingdom_flag_icon_round.svg.png" class="btn">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search