CODEWITHSUNDEEP
htmlcssimageborder
juan
juan

Reputation: 99

css: Use single-sided outline and outline-offset?

I would like to put an internal frame to an image with outline and outline-offset but only on the top and bottom, however there is no such thing as outline-offset-top, outline-offset-bottom, outline-offset-left or outline-offset-right.

Does anyone know of any way or alternative to do this?

img {
    vertical-align: middle;
    border-style: none;
    outline: 70px solid white;     
    outline-offset: -70px;
}
    <img src="https://cdnnmundo1.img.sputniknews.com/img/07e5/08/17/1115327694_182:0:2230:2048_1920x0_80_0_0_0642590b6896368f2c051719f7c66ea7.jpg">

Upvotes: 0

Views: 373

Answers (1)

Temani Afif
Temani Afif

Reputation: 272723

use clip-path to cut the top part instead of adding a white color

img {
  clip-path:inset(70px 0 0);
}
<img src="https://cr.epaenlinea.com/pub/media/version20200605/catalog/product/cache/a83b746ef25730b9cb1cc414bac0f04a/1/2/1246118_3.jpg">

Upvotes: 1

Related Questions