There is a hexagon (Link to Codepen.io ).
If you shove it in owl-carousel, the border-radius breaks in the Edge and Mozila is displayed normally, in the Yandex browser and Opera flies. At the same time, when the border-radius slide is moving, when it stops, the border-radius disappears.

enter image description here It should be like this: enter image description here dev tool: enter image description here

HTML

 <div class="hexagon"> <div class="six"> <div class="inner-six1"></div> <div class="inner-six2"></div> <div class="inner-six3"></div> </div> </div>

SASS

 .hexagon margin: 0 auto padding: 70px outline: 1px solid black text-align: center .six display: inline-block position: relative width: 220px height: 150px .inner-six1,.inner-six2,.inner-six3 border-radius: 30px overflow: hidden position: absolute width: inherit height: 100% &:before content: "" position: absolute width: 100% height: 246px top: 0 left: 0 background: url("https://fshoke.com/wp-content/uploads/2016/01/Arnold-Schwarzenegger-mixed-with-Sylvester-Stallone.jpg") 50% 50% / cover no-repeat .inner-six1/* ELEMENT 1 */ transform: rotate(60deg) &:before transform: rotate(-60deg) translate(42px, -23px) .inner-six2/* ELEMENT 2 */ transform: rotate(-60deg) &:before transform: rotate(60deg) translate(-42px, -23px) .inner-six3/* ELEMENT 2 */ &:before transform: translateY(-47px)
  • It can be seen that the third block does not apply border-radius. Through the developer tools watched? There may be other properties for the last element in the final file starting to overlap its border radius. - A. Gusev
  • In developer tools for all 3 elements the property is applied, the border-radius is not crossed out, but in fact it is not there, that's what surprises) I will dig, look what's wrong, if I write here, for any help in the question thanks! - junior-web-dev
  • I realized that the border-radius flies only when it is OK in the owl-carousel outside, I’m looking for a mistake further ... - junior-web-dev

1 answer 1

Found a bearing! )

By the way, if you set the last element of the border, you can see that all the same, the border-radius works, but before or someone else ignores it.

Decided this by using the transform / rotate (0) element? the rest, too, have this property :)

A crutch, but it works. If you can’t do anything intelligible, use :)

Solution here - codepen

 .inner-six3/* ELEMENT 3 */ border-radius: 30px transform: rotate(0deg)
  • And the truth is that this is the only way they differ) to say that this behavior of the element surprises me is the same as keeping silent) Thank you very much) - junior-web-dev
  • @ junior-web-dev if helped, mark it as a solution :) - A. Gusev