Menu
This is strange.
This works:
border-right: 1px solid rgba(0,0,0,0.12); /* renders a gray border */ But when I use it together with background color, then border is now a solid black line.
background-color: #333; border-right: 1px solid rgba(0,0,0,0.12); /* renders a black border */ Am I missing something ?
http://codepen.io/anon/pen/myxpXN
230
Step 1: Create a div tag. Step 2: Specify the border-style property to be double to set two borders around the box. Step 3: Set the background-clip property to padding-box which clips the background color to the padding of the element.
Click "Edit" and select "Fill" to get options to fill the border with a color or pattern. You'll also get the option to set the opacity, which will determine how transparent your border is. Set the opacity to 100 percent for a fully transparent border, or 50 percent for a semi-transparent border.
The easiest solution to this is to use rgba as the color: border-color: rgba(0,0,0,0); That is fully transparent border color.
The behaviour you are experiencing is that the background of the element appears through the transparent border. If you want to prevent this and clip the background inside the border, you can use:
background-clip: padding-box; html, body { height: 100%; margin: 0; padding: 0; background:green; } #nav { position:relative; height: 100%; width: 240px; background-clip: padding-box; /** <-- this **/ background-color: pink; border-right: 10px solid rgba(0,0,0,0.12); } header { height: 4em; background-color: #ffffff; }<div id="nav"> <header></header> <nav></nav> </div>More info about background-clip on MDN.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
