html - CSS Rounded Corner: White lines -
html - CSS Rounded Corner: White lines -
i experiencing problem rounded corners on fixed body container page. extracted necessary code elements , have places them in jsfiddle. see here. notice borders of page have white lines on both inner side , outer side. suggestions on removing them? here html code:
<html><body> <div id="fixedbody"> <header> <br> <br>header stuff goes here</header> <div id="maincontent">content stuff goes here</div> <footer>footer stuff goes her</footer> <br> <br> </div> </body></html>
here css code:
body { background:transparent ; background-color: #0c0c0c; background:transparent ; min-width: 1200px; } #fixedbody { width: 980px; display: block; margin-left: auto; margin-right: auto; border: 3px solid; border-radius: 25px; overflow: hidden; clear: both; color: #000000; background-color: #ffffff; background-clip: border-box; } header { height: 515.25px; background-color:#0000ff; width: 980px; color: #ffffff; position: relative; background:transparent ; }
here image of top right corner.
you need remove background-color parent div "fixedbody":
background-color: #ffffff;
since result bottom part transparent, here's how can prepare background color white:
html
<div id="fixedbody"> <header> <br/> <br/>header stuff goes here </header> <div class="whitebg"> <!--wrap bottom part div tag having class whitebg--> <div id="maincontent">content stuff goes here</div> <footer>fotter stuff goes her</footer> </div> </div>
css whitebg
.whitebg{ background-color:white; padding:15px; }
live demo
html css
Comments
Post a Comment