[Ginger LParticipant]

We are trying to have rounded corners on the revolution slider. Wrapping the slider in css for border radius isn’t working, even with the webkit mask that they provided when I contacted them. Slider Revolution said to contact the theme author because the theme isn’t html5 compatible and that you could change the header of the theme to support the setting.

Here is the css code they provided:
.rev_slider_wrapper {
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
position: relative;
z-index: 1;
overflow: hidden; }

I’ve been placing the css in the customizer custom area. Please let me know how to get this to work. Thanks!

[RadModerator]

Hi Ginger,

Thank you for writing in!

X is HTML5 compatible. HTML5 isn’t about styling, it is a markup. Rev. Slider author should know that. More info here http://www.w3schools.com/html/html5_intro.asp

What you’re trying to do is css3 related which is different from html5.

Try this, then clear your plugin’s or browser’s cache.

.x-slider-revolution-container {
webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
overflow: hidden; 
}

Thanks!

[Author]

Posts