border-radius wont apply to top of div
Question
I'm working on a landing page just for personal use, but i have ran into a problem. I have a div with a border radius, its called .popOut. The border radius applies to the bottom of the div but not the header part, why? And how can i fix this? Also if you know how to make the box-shadow a little bit lighter and not as dark that would be great! Thanks!
Code:
HTML:
*{margin:0; padding:0;} body{ background: #CCC; color:#000305; font-size: 87.5%; font-family: Arial, 'Lucida Sans Unicode'; line-height: 1.5; text-align: left; } .body{ margin: 0 auto; width: 70%; background:#ebebeb; margin:auto; } .mainBack{ margin:auto; background:white; width:600px; height:650px; } .popOut{ background:white; width:80%; height:600px; margin:auto; box-shadow:0px 0px 15px 0px; border-radius:6px; position:relative; top:30px; } .mainHeader{ background:linear-gradient(#465BF6,#3149F2); width:100%; height:100px; }
<html> <head> <meta charset="UTF-8"> <title> Welcome! </title> <script type="text/javascript" src="jquery.js"> </script> <script type="text/javascript" src="script.js"> </script> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body class="body"> <div class="mainBack"> <div class="popOut"> <div class="mainHeader"></div> <div class="mainArea"></div> <div class="mainAreaB"></div> <div class="mainFooter"></div> </div> </div> </body> </html>
3 answers
solution1
0 2015-04-01 00:16:31
The problem you are having is that .mainHeader does not have a border-radius: and is overflowing over the edge of .popOut .
You can fix it by giving main header a border-radius:
.mainHeader{
background:linear-gradient(#465BF6,#3149F2);
width:100%;
height:100px;
border-radius:5px 5px 0 0;
}
JSFiddle Demo
or by giving .popOut overflow hidden:
.popOut{
background:white;
width:80%;
height:600px;
margin:auto;
box-shadow:0px 0px 15px 0px;
border-radius:6px;
position:relative;
top:30px;
overflow:hidden;
}
solution2
0 ACCPTED 2015-04-01 00:16:47
Your .mainHeader div is covering your border-radius of the .popOut div. You could add this line to your .mainHeader class: border-radius: 6px 6px 0px 0px;
Also, to make your box-shadow lighter just add a color like this:
box-shadow:#777 0px 0px 15px 0px;
Here's an example:
*{margin:0; padding:0;} body{ background: #CCC; color:#000305; font-size: 87.5%; font-family: Arial, 'Lucida Sans Unicode'; line-height: 1.5; text-align: left; } .body{ margin: 0 auto; width: 70%; background:#ebebeb; margin:auto; } .mainBack{ margin:auto; background:white; width:600px; height:650px; } .popOut{ background:white; width:80%; height:600px; margin:auto; box-shadow:#777 0px 0px 15px 0px; border-radius:6px; position:relative; top:30px; } .mainHeader{ background:linear-gradient(#465BF6,#3149F2); width:100%; height:100px; border-radius: 6px 6px 0px 0px; }
<html> <head> <meta charset="UTF-8"> <title> Welcome! </title> <script type="text/javascript" src="jquery.js"> </script> <script type="text/javascript" src="script.js"> </script> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body class="body"> <div class="mainBack"> <div class="popOut"> <div class="mainHeader"></div> <div class="mainArea"></div> <div class="mainAreaB"></div> <div class="mainFooter"></div> </div> </div> </body> </html>
solution3
0 2015-04-01 00:18:12
Easy add, overflow: hidden; to .popOut
Sorted!
The reason this happened is because your blue div is covering the popOut div, which in turn covers the rounded corners. Adding overflow:hidden; hides anything that goes outside your popOut container!
As for box-shadow take a look here: http://css3gen.com/box-shadow/
I find it very useful even with a lot of experience. You can add rgba to box shadow as shown in the link above, this enables you to change color and opacity!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.