How to make outline offset radius

Question

Im trying to draw a border with radius corner within an img but I cant do it using the propertly "outline-offset: -10px" because the corners aren't radius.

I was trying with an absolute div with these properties:


<figure title="Ruleta en Vivo" class="container-juego"> 
 <a href="#" style="position: relative;">
    <div style="
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    display: block;
    border: 1px solid #FBC64D;
    position: absolute;
    left: 0;
    z-index: 5000;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 3px;
"></div>
 <img src="https://d1131w2enq9v80.cloudfront.net/img/logos/evolution/destacados/imagen_destacada-ruleta-en-vivo01.jpg" class="imgdestacada lazy loading" data-was-processed="true" style="">
 </a>
</figure>

div {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  display: block;
  border: 1px solid #FBC64D;
  position: absolute;
  left: 0;
  z-index: 5000;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 3px;
}

Is there any easier way than this?

Result would be this: Result

I'd avoid using outline over border anyway because it has accessibility implications. It would be helpful if you could provide your HTML for a [mcve]. — Alexander Nied, Nov 18 '21 at 14:38
Please do not show CSS code only, without the HTML it is supposed to apply to - that tells us rather little. Depending on the actual structure, this should probably work without explicitly calculating width and height, and without applying any translation either. (If you have a wrapper element around the image, of the same width & height as the image, and with `position:relative`, then you can simply absolutely position a sibling of the image using `20px` for top/bottom/left/right, and don't need to specify width & height at all.) — CBroe, Nov 18 '21 at 14:38

score 1 · Accepted Answer · answered Nov 18 '21 at 14:54

you could just add an after to the container, place it on top and give the size and properties you want:

div {
  position:relative;
  display:inline-block;
}
div:after {
  content:'';
  border: 1px solid #FBC64D;
  border-radius: 3px;
  display:block;
  height:calc(100% - 20px);
  width:calc(100% - 20px);
  position:absolute;
  top:10px;
  left:10px;
}

<div>
<img src="https://d1131w2enq9v80.cloudfront.net/img/logos/evolution/destacados/imagen_destacada-ruleta-en-vivo01.jpg" alt="">
</div>

score -1 · Answer 2 · answered Nov 18 '21 at 15:00

-1

Add the following code in css file.

img {
     outline: 1px solid #FBC64D;
     outline-offset: -10px;
}

answered Nov 18 '21 at 15:00

MagnusEffect

3,363
1
16
41

That's missing the border-radius. (Which is why they said upfront already that using outline-offset won't work for them.) – CBroe Nov 18 '21 at 15:04
Refer this https://stackoverflow.com/questions/5394116/outline-radius – MagnusEffect Nov 18 '21 at 15:19
What for? None of the solutions there use `outline-offset`, as far as I can see. – CBroe Nov 18 '21 at 15:21

How to make outline offset radius

2 Answers2