Revolution Slider - Rounded Corners - css

Question

I have revolution Slider on a Wordpress CMS. I've implemented custom css in the Revolution Slider panel. When you first load the page the slider is rounded on the top left and bottom right, but when you resize the window (just a little bit) the rounded corners disappear! I cannot find the culprit, the responsiveness should continue to work with the custom css, but it does not. Thank you for any help.
https://www.superherodigital.com/livescan/
Code that I'm using.
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0;

Answer 1

no need for these complicated tasks ...
Just follow the path below in Direct Admin and ... (file manager)
path:
example.com/wp-content/plugins/revslider/public/assets/css/rs6
open rs6
use ctrl+f and search rs-module
rs-module { position:relative;overflow:hidden;display: block;border-radius:25px }
put border-radius:25px or anything 35px , 45px ....... like up line ...

Answer 2

This is probably something to do with the slider declaring the CSS properties in JS (dynamically changing the DOM properties), removing any applied styles in your stylesheet. I can see you're applying these declarations on #rev_slider_1_1_wrapper.
I would add a class to this instead, and apply the border radius to a new class.
.rev-slider-border-radius {
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0;
}
Then add the class to the slider wrapper element if it is in your HTML:
<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container avada-skin-rev-nav rev-slider-border-radius"> ... </div>
Or, if the JS is generating this, apply the class via JS after the slider has been initialised:
$(function() {
$('.rev_slider_wrapper').addClass('rev-slider-border-radius');
});

Answer 3

You can add a wrapper around the slider revolution slider with the class roundedslider where the roundedslider class has following style attributes:
.roundedslider{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
position: relative;
z-index: 1;
overflow: hidden;
}
This works perfect in the example here also: http://revolution.themepunch.com/home-slider-boxed/
All other questions about ThemePunch products are answered at http://themepunch.com/support-center
Hope this helps you further ?

Answer 4

To me this is working fine, just substitute your slider and the radius you like on the corners:
.rev_slider, .rev_slider_wrapper, .rev_slider_wrapper img, .tp-revslider-mainul, .tp-revslider-slidesli
{
-webkit-border-radius: 8px !important;
-moz-border-radius: 8px !important;
border-radius: 8px !important;
}