0

I am trying to apply border radius corner edges in html video but unfortunately not applying please help me how can I do that ? enter image description here

html view

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="rounded">
            <video width="100%" height="800"  autoplay loop muted>
                <source src="{{ url('') }}/castle-theme-assets/video/video-slider.mp4" type="video/mp4">
              </video>
            </div>
        </div>
    </div>
</div>

css

 .rounded {
    border-radius: 20px;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    margin-top: -43px;
}
zubair malik
  • 223
  • 1
  • 12
  • your div `.rounded` may not be the same size as the video wich means the `border-radius` may work. but you simply wont notice. – Ramon de Vries Nov 18 '21 at 12:15
  • Does this answer your question? [rounded corners on html5 video](https://stackoverflow.com/questions/6238451/rounded-corners-on-html5-video) – Kayoshi Nov 18 '21 at 12:57

1 Answers1

0

try doing it directly inside the video tag or the source tag by adding a class to the source or video tag to see if it will reflect.

princess
  • 1
  • 1