Round Edges Images / Video

[FloMo]

Hello there,
maybe a more or less simple question, I couldn't find an answer on so far: how can I set round edges for images and videos?

Many thanks for your support.
Cheers

[Richard]

Dear @FloMo

This is not possible with standard options (unless the actual image and video files have round edges) but if you would like to use CSS to achieve this look into:

Border Radius

https://www.w3schools.com/cssref/css3_pr_border-radius.asp

With Video, you will need to apply the Border radius to the video's container for example:

https://codepen.io/hetgelaat/pen/dVjZWE

https://stackoverflow.com/questions/6238451/rounded-corners-on-html5-video/24014427

---

https://laytheme.com/documentation.html#custom-css-styling

---

Best wishes @FloMo & have a great day 🏖

Richard

[dominikrobak]

This post is deleted!

[dominikrobak]

Hi @FloMo and @Richard can you help me to round the corners in whole my website?
For every image. It's possible with one code?
Thanks a lot. Dominik

[arminunruh]

just apply this css to any css selectors:

border-radius: 20px;
overflow: hidden;

like:

.ph{
border-radius: 20px;
overflow: hidden;
}

[arminunruh]

into lay options → custom css & html

[MaxWinter]

Hello,

this code was helping me a lot to give video sequences round edges on my whole website. Thanks for that!

However, I now have problems with the rounded edges on photos. But only at the bottom as soon as I add a caption. See the screenshots.

I am using this code for the videos:

.ph{
border-radius: 6px;
overflow: hidden;
}

And this code for the images:

.img{
border-radius: 6px;
overflow: hidden;
}

Does anyone have any idea how I could fix this?

Everyone have a nice weekend!

[arminunruh]

try this

.type-img img{
    border-radius: 10px;
}
.type-img .ph{
    background-color: transparent!important;
}