Revolution Slider – Rounded Corners

4 Views

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;
Post Views: 4

Related posts

Leave a Reply

4 comments

  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 …

  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');
});

  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 ?

  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;
}