I have a problem with displaying a block with top/bottom border and border-radius. Don't know why an inside radius appears within a border.. Please, take look at the screenshot & code below..
http://img703.imageshack.us/img703/3074/scrren1.jpg
<section id="block">
<div class="block-header"><h1>Block</h1></div>
</section>
#block {width:1000px; height:329px; position:relative; border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px;}
#block .block-header { position:absolute; right:0px; top: 0; border-top:10px solid #81a32b; width:500px; border-radius:0px 4px 0px 0px; -webkit-border-radius:0px 4px 0px 0px; }
Do u know any solution to this problem?
jsfiddle
In Opera the height is directly related to the rounding you are trying to achieve
Css
border-top:10px solid #81a32b;
border-radius:0px 10px 0px 0px;
Fiddle -> http://jsfiddle.net/325nH/2/
you have declared:
border-top:10px solid #81a32b;
border-radius:0px 4px 0px 0px;
so you are 6px short that are filled by Opera with white space
Related
I'm using IE10 to design something at the moment [Because it needs to be completely compatible with it], and I'm having trouble.
I have two boxes on either side of the page, with an image at the top. The inner top corner is curved using border-top-*-radius, and this is also implemented on the image inside.
CSS:
#rightsidebar {
position:fixed;
width: 300px;
height: 400px;
padding: 10px;
margin: 0px 0 0 500px;
border-top-left-radius: 110px;
-webkit-border-top-left-radius: 110px;
background-color: #ffffff;
border: 2px dashed #000000;
}
#leftsidebar {
position:fixed;
width: 300px;
height: 400px;
padding: 10px;
margin: 0px 0 0 0px;
border-top-right-radius: 110px;
-webkit-border-top-right-radius: 110px;
background-color: #ffffff;
border: 2px dashed #000000;
}
HTML:
<div id="rightsidebar">
<img style="background-color: #000000; width:300px; height:196px; border-top-left-radius:105px; -webkit-border-top-left-radius:110px;" src="{image:right image}">
</div>
<div id="leftsidebar">
<img style="background-color: #000000; width: 300px; height: 196px; border-top-right-radius: 105px; -webkit-border-top-right-radius: 105px;"src="{image:left image}">
</div>
My JSFiddle is here: http://jsfiddle.net/V73G5/
Using IE, you can see that the right container's image isn't doing the same as the left's, even though I just copy and pasted the code and edited it slightly. It does however work on Chrome, which makes me think this may be a bug. Any insight or suggestions on how to resolve this?
EDIT: I've found a way to work around it using:
border-radius: 105px 1px 0 0;
It's not a proper solution, and I've still no clue as to why this happened in the first place, but the 1px is barely noticeable and seems to make it work.
The behaviour of border radius is affected by compatibility mode in IE10.
If you press F12 you can view the developer console and change the compatability settings.
If the Document mode is set to IE7 or IE8 Standards then the border-radius-left: 10px; doesn't work, however if the standards mode is set to IE9 Standards or Standards then it behaves as expected.
download PIE.htc file and attached your css
#rightsidebar {
border-radius: 8px;
behavior: url(/pie/PIE.htc);
}
for more details check below image one.
may it will help you.
When using an alpha transparency border with rounded corners in Safari, the background clips into the border. This happens even when using background-clip: padding-box. I know that I can simply wrap the h1's in a span/div/etc and give that the border, but I'm wondering if anyone knows if it is possible to do this without any more mark up.
Here is the css I'm using:
h1.inner {
background: #ffa51f;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
border-top: 10px solid rgba(33,33,33,.05);
border-bottom: 10px solid rgba(33,33,33,.05);
border-right: 10px solid rgba(33,33,33,.05);
color: #FFF;
display: inline-block;
font-size: 47px;
font-weight: 800;
line-height: 1.2;
padding: 0 .6em 0 0;
position: relative;
text-transform: uppercase;
text-align: left;
background-clip: padding-box;
box-sizing: border-box;
}
h1.inner:before {
background: #ffa51f;
border-top: 10px solid rgba(33,33,33,.05);
border-bottom: 10px solid rgba(33,33,33,.05);
content: "";
position: absolute;
top: -10px;
bottom: -10px;
width: 9999px;
background-clip: padding-box;
box-sizing: border-box;
}
h1.inner:before {
right: 100%;
}
Below is a jsfiddle and screenshot with an example of what I'm talking about.
http://jsfiddle.net/39Xen/
http://imgur.com/Hp2bzBm
Is it posible that what you are asking has been addressed here:
CSS rounded corners bug in Safari?
?
It seems that Safari has some limitation with respect to what you are trying to do.
Hope that helps.
Safari and Mobile Safari seem to have a problem when you combine border radius, padding and borders. Works fine in Chrome and Firefox.
<-- Expected
<-- Safari Rendering
HTML:
<img src="http://lorempixel.com/200/200/animals/3/" />
CSS:
img {
width: 200px;
height: 200px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
padding: 3px;
border: 1px solid #999;
margin: 10px
}
Example: http://jsfiddle.net/ucNwx/2/
Is it my fault or Safaris? How would I fix it?
My bet it's Safari bug: border-radius is applied late and produces clipping effect. Fortunately, box-shadow is rendered correctly, so let's use it:
border-radius: 50%;
box-shadow:
0 0 0 3px white,
0 0 0 4px #999;
Works on Safari 6 on iPad and OS X.
Best solution I can think of right now: http://jsfiddle.net/ucNwx/5/
Uses a wrapper div to draw the border and then places the image inside of it. Still got some artifacts on the right edge but I guess that's a Safari bug.
HTML
<div class="border-container">
<img src="http://lorempixel.com/200/200/animals/3/" />
</div>
CSS
.border-container {
width: 206px;
height: 206px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 1px solid #999;
margin: 10px
}
img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 200px;
height: 200px;
margin: 3px;
}
When using a rounded border on an image, webkit browsers hide the border behind the image
CSS
img {
border: 10px solid #000;
border-radius: 100%;
}
HTML
<img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />
Bug reproduced # http://jsfiddle.net/zPpVm/
This is probably related to this Webkit bug, but I cannot find a suitable work around.
A possible workaround is to use a box-shadow:
box-shadow: 0 0 0 10px black;
Live Example
The main problem: It won't be calculated in the box-model
As another workaround, you can wrap your image like this:
<span class="img_container" >
<img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />
</span>
Than style elements:
.img_container {
border: 10px solid #000;
border-radius: 100%;
display: inline-block;
overflow: hidden;
}
.img_container img {
display: block;
}
All modern browsers except Opera will render it correctly.
Im trying to achieve an inner-shadow effect on a simple box, something like:
alt text http://gotinsane.com/test.jpg
where the green box is the content inside another box.
My problem is that if i give the content box any kind of background, the outer box box-shadow effect vanish!
Here an example of my problem (with markup and css), i've set the content height smaller to evidence the problem - atm i really dont care about IE*, this is just a test.
Any idea?
UPDATE
The content inside the box is a somewhat kind of slide, here an example (original problem).
thirtydot's answer does the trick, but it forces me to make a little hack, changing the wrapper background in function of the content: example here (thirtydot trick).
This can be a solution, but i dont like it too much and still dont understand why the outer box shadow get behind the inner box background (color, image)
UPDATE 2
Talking about this problem on another forum, i found another way: basically, instead of use box-shadow on the wrapper, that will act as a mask, I use box-shadow and border-radius directly on the content (.step elements)
However, the 'mask' effect is exactly what i was trying to accomplish, so this isnt the solution neither.
I still don't understand how and why an inner element background interfere with an outer element design, or why the shadow dropped from the outer element get behind the inner one. Could this be a css bug?
UPDATE3
Someone opened a bug on mozilla, and got this answer that clearify the 'problem':
From http://www.w3.org/TR/css3-background/#the-box-shadow :
In terms of stacking contexts and the painting order, the outer shadows of an
element are drawn immediately below the background of that element, and the
inner shadows of an element are drawn immediately above the background of
that element (below the borders and border image, if any).
In particular, the backgrounds of children of the element would paint above
the inset shadow (and in fact they paint above the borders and background of
the element itself).
So the rendering is exactly what the spec calls for.
UPDATE4
Fabio A. pointed out another solution, with css3 pointer-events.
Looks good and works on IE8 too ;)
Since I am having this problem too and I too don't see this behaviour being normal, I filed a bug report over at mozilla
I can reproduce the problem in Google Chrome too, though, so I wonder whether this is really a bug. But it could be.
edit:
Indeed it's not a bug, but just the way it's meant to work. So, on the basis of this information, I forked your jfiddle example and came up with this solution:
The markup now looks like this:
<div id="box">
<div id="wrapper">
<div id="box_content">
Content here
</div>
<div id="mask"></div>
</div>
</div>
The mask becomes another div, which is layered on top of the #box_content one by means of being absolutely positioned. This is the CSS:
#wrapper{
position: relative;
display: inline-block;
width: 280px;
height: 280px;
border-radius: 5px;
margin: 10px;
}
#mask {
position: absolute;
top: 0px; left: 0px;
width: 100%;
height: 100%;
pointer-events: none; /* to make clicks pass through */
box-shadow: 0 0 10px #000000 inset;
}
#box_content{
background-color: #0ef83f;
height: 100%;
}
I'm a little confused what you're actually after. If it's not quite right, let me know :)
This is my best guess.
Live Demo
CSS:
(I added in the vendor prefix rules.)
#box {
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
width: 280px;
height: 280px;
padding: 10px
}
#wrapper {
background-color: #0ef83f;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 18px #000;
-moz-box-shadow: inset 0px 0px 18px #000;
box-shadow: inset 0px 0px 18px #000;
width: 240px;
height: 240px;
padding: 20px
}
HTML:
<div id="box">
<div id="wrapper">
Content here
</div>
</div>
the problem is layered is overlapped, you can avoid it using margin or padding.
Try
http://jsfiddle.net/pramendra/FEk3c/5/
#box{
background-color: #FFFFFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 10px #000000;
width: 300px;
height: 300px;
}
#body{
margin: 0px;
}
#wrapper{
display:inline-block;
width: 280px;
height: 280px;
border-radius: 5px;
box-shadow: 0 0 10px #000000 inset;
box-shadow:inset 0 0 10px 0 #000000;
margin: 10px;
}
#box_content{
background-color: #f00;
margin:5px;
}
Check this fiddle: http://jsfiddle.net/FEk3c/6/
#box{
background-color: #FFFFFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 10px #000000;
width: 300px;
height: 300px;
}
#body{
margin: 0;
}
#wrapper{
display: inline-block;
width: 280px;
height: 280px;
border-radius: 5px;
box-shadow: 0 0 10px #000000 inset;
margin: 10px;
}
#box_content{
background-color: #0ef83f;
height: 100px;
}
Just make sure the child background property is specified with rgba, like in this fiddle.
Give the parent a background-color to prevent whatever's underneath showing through.
ul {
box-shadow : inset 0 0 10px 10px gray;
background-color: white;
}
li:nth-child(even) {
background : rgba(255,0,0,0.2);
}
This works great for me without any additional DOM elements (like 'wrapper' etc.):
div.img {
display: inline-block;
position: relative;
width: 400px;
height: 280px;
background-image: url(/images/anyimage.png);
}
div.img:after {
display: inline-block;
width: 100%;
height: 300px; //parent height +20px
position: absolute;
top: -10px;
left: 0;
box-shadow(inset -25px 0 25px -25px rgba(0,0,0,.2), inset 25px 0 25px -25px rgba(0,0,0,.2));
content: ' ';
pointer-events: none;
}