Faced such a problem: on android incorrectly overflow is displayed with border-radius, in the block_bl class there are no rounding when there is a block with scrolling inside the block. On ios, all the rules and the PC too. I tried -webkit-mask-image (svg and png) - the result is there, but in the end, all the fonts are blurry (there is more than 300dpi on the android device, on ios - gud). I tried to set border-radius to the class overflow_l, but on the android scroll slider is not hidden. Maybe there are some suggestions? Thank you in advance.

Example: JsFiddle

@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&subset=cyrillic'); @import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=cyrillic'); * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } body { font-family: 'PT Sans', sans-serif; background-color: #FAFAFA; font-size: 15px; padding: 20px; } a { color: #ACACAC; text-decoration: none; } ul { list-style: none; } .block_bl { display: block; background: #FFF; width: 100%; padding: 0; overflow: hidden; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03); -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03); -moz-box-shadow: 0 4px 10px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03); } .block_bl .overflow_l { position: relative; width: 100%; } .block_bl .overflow_l:before, .block_bl .overflow_l:after { content: ''; position: absolute; top: 0; height: 100%; width: 20px; z-index: 20; } .block_bl .overflow_l:before { left: 0; background: rgba(255,255,255,1); background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 43%, rgba(255,255,255,0) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(43%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0))); background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 43%, rgba(255,255,255,0) 100%); background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 43%, rgba(255,255,255,0) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 43%, rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 43%, rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 ); } .block_bl .overflow_l:after { right: 0; background: rgba(255,255,255,0); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 57%, rgba(255,255,255,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(57%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 57%, rgba(255,255,255,1) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 57%, rgba(255,255,255,1) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 57%, rgba(255,255,255,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 57%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 ); } .block_bl .overflow_l > div { display: block; overflow-x: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; } .block_bl ul.admin_links { display: inline-block; vertical-align: top; padding: 0 20px; height: 62px; font-size: 0; white-space: nowrap; } .block_bl ul.admin_links li { display: inline-block; vertical-align: top; height: 100%; } .block_bl ul.admin_links li a { display: block; position: relative; height: 100%; line-height: 60px; font-size: 15px; padding: 0 15px; color: #2F2F2F; } .block_bl ul.admin_links li:first-child a { padding-left: 0; } .block_bl ul.admin_links li.active a { font-weight: bold; color: #2F2F2F !important; background: #FFF; height: 42px; line-height: 41px; padding: 0 20px; margin: 9px 6px 0 6px; border-radius: 23px; -webkit-border-radius: 23px; -moz-border-radius: 23px; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.09), 0 1px 3px 0 rgba(0,0,0,0.11), 0 0 0 1px rgba(0,0,0,0.06); -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,0.09), 0 1px 3px 0 rgba(0,0,0,0.11), 0 0 0 1px rgba(0,0,0,0.06); -moz-box-shadow: 0 4px 10px 0 rgba(0,0,0,0.09), 0 1px 3px 0 rgba(0,0,0,0.11), 0 0 0 1px rgba(0,0,0,0.06); } .block_bl ul.admin_links li.active:first-child a { margin-left: 0; } .block_bl ul.admin_links li.active:last-child a { margin-right: 0; } .block_bl ul.admin_links li a:hover { color: #B1B1B1; } 
 <div class="block_bl"> <div class="overflow_l"> <div> <ul class="admin_links"> <li><a href="#">Главная</a></li> <li class="active"><a href="#">Сайты</a></li> <li><a href="#">Форум</a></li> <li><a href="#">Новости</a></li> </ul> </div> </div> </div>

    1 answer 1

    Your current code is not cut off by border radius without overflow hidden because you have superimposed pseudo-elements on top (so far I don’t understand why they are needed). You must set the pseudo-elements for the corresponding radii and for .block_bl overflow: hidden can be removed.

    By the way, it is no longer necessary to use vendor prefixes for border-radius , box-sizing and box-shadow , and it is enough to write linear-gradient in 4 lines for very wide support.

     @import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&subset=cyrillic'); @import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=cyrillic'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'PT Sans', sans-serif; background-color: #FAFAFA; font-size: 15px; padding: 20px; } a { color: #ACACAC; text-decoration: none; } ul { list-style: none; } .block_bl { display: block; background: #FFF; width: 100%; padding: 0; border-radius: 10px; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03); } .block_bl .overflow_l { position: relative; width: 100%; } .block_bl .overflow_l:before, .block_bl .overflow_l:after { content: ''; position: absolute; top: 0; height: 100%; width: 20px; z-index: 20; } .block_bl .overflow_l:before { left: 0; border-radius: 10px 0 0 10px; background: rgba(255, 255, 255, 1); background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 0) 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); } .block_bl .overflow_l:after { border-radius: 0 10px 10px 0; right: 0; background: rgba(255, 255, 255, 0); background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 1) 100%); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); } .block_bl .overflow_l > div { display: block; overflow-x: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; } .block_bl ul.admin_links { display: inline-block; vertical-align: top; padding: 0 20px; height: 62px; font-size: 0; white-space: nowrap; } .block_bl ul.admin_links li { display: inline-block; vertical-align: top; height: 100%; } .block_bl ul.admin_links li a { display: block; position: relative; height: 100%; line-height: 60px; font-size: 15px; padding: 0 15px; color: #2F2F2F; } .block_bl ul.admin_links li:first-child a { padding-left: 0; } .block_bl ul.admin_links li.active a { font-weight: bold; color: #2F2F2F !important; background: #FFF; height: 42px; line-height: 41px; padding: 0 20px; margin: 9px 6px 0 6px; border-radius: 23px; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.09), 0 1px 3px 0 rgba(0, 0, 0, 0.11), 0 0 0 1px rgba(0, 0, 0, 0.06); } .block_bl ul.admin_links li.active:first-child a { margin-left: 0; } .block_bl ul.admin_links li.active:last-child a { margin-right: 0; } .block_bl ul.admin_links li a:hover { color: #B1B1B1; } 
     <div class="block_bl"> <div class="overflow_l"> <div> <ul class="admin_links"> <li><a href="#">Главная</a> </li> <li class="active"><a href="#">Сайты</a> </li> <li><a href="#">Форум</a> </li> <li><a href="#">Новости</a> </li> </ul> </div> </div> </div>