I have a layout where the all of the page content is in a box with rounded corners. This includes the title of the page, etc. I have a div element that contains my header content, a div that contains the main content of the page, and a div that contains the footer. My problem is this: Since the border of my "header" div is not rounded, the large "container" div seems to not be rounded at the top. I have investigated, and shown that this is simply the "header" div superimposing itself over the "container" div. I have an example here: http://jsfiddle.net/V98h7/.
I have tried rounding the border of the "header" div to the same extent, but this creates a small defect on the border (it gains a border of its own, of the "header" div's background color).
Out of desperation, I also tried setting the z-index of the container to a large number. THat did not do anything.
I feel that there should be a simple solution to this problem. I do not want a javascript fix. I would prefer CSS, but LESS is ok too.
Here is the fiddle - http://jsfiddle.net/ashwyn/V98h7/2/
Add -
#outer {
overflow: hidden;
}
and it will work.
More information on the overflow property can be found on MDN.
Use this:
#outer { overflow: hidden; }
or this:
#inner1 {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
Or you maybe can try this:
#outer div:first {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
(Note: I haven't tested the last option above).
here is the update jsfiddle
http://jsfiddle.net/V98h7/1/
To just round border corners border-radius can take 4 values TOP-LEFT RADIUS TOP-RIGHT RADIUS BOTTOM-RIGHT RADIUS BOTTOM-LEFT-RADIUS
so border-radius: 20px 20px 0 0; will round your inner div from top. Remember to use the same radius value as that of the parent div, else you will see some extra border.
Border fix for css border-radius background color bleed and inner elements breaking border radius. This might help with the weird border glitches.
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
This reference was found here http://css3please.com/
by https://stackoverflow.com/a/7052769/9071880
Try giving the container div a slightly larger border radius (on the top two corners) than the header div.
Related
I am just brainstorming design ideas and this one has me a little stumped. I want to be able to individually round the sides of a box. Such as three sides of the box are still square and the fourth side is rounded or curved. My own experiments haven't come anywhere close and Google only comes back with rounded corners (border radius). It seems like it should be simple enough, but clearly I am missing something.
Anybody have any thoughts? Thanks.
I found another similar answer:
Here is the jsfiddle: http://jsfiddle.net/swqZL/
CSS for element div with class "figure":
.figure {
height: 400px;
width: 200px;
background-color: black;
border-bottom-left-radius: 100%30px;
border-bottom-right-radius: 100%30px;
}
Horizontal radius 100%, vertical radius 30px
I've created a view and I'm trying to make it with rounded corners so I'm using border-radius.
The only problem is that I can see the corners of one of my div elements and I can't seem to get rid of them. I try to narrow down which element it was showing the borders with google developer tools but I can't pinpoint it.
Here is the sample.
It is because of parent having no border-radius, so you can add same border-radius to .center_content class
.center_content {
width: 90%;
margin: auto;
position: relative;
background: #FFFFFF;
border-radius: 15px;
}
or You can also remove the background from this class to achieve the same.
JS Fiddle Sample
I'm having trouble figuring out why border-radius is gone from my #screen element when using chrome but not firefox or ie9?
I have all the different prefixes for each browser plus the standard border-radius:
www.cenquizqui.com
The upper content box that holds the pictures, called #screen
a copy paste of screen's css:
#screen {background: none repeat scroll 0 0 #EEEEEE;
display: block;
height: 300px;
position: relative;
width: 960px;
overflow:hidden;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;}
Is it because chrome does not handle the 'trimming' of the images properly? I thought it was only a problem when you had the actual tags inside the rounded corner container, not when the img is called as background-image through css.
Regards
G.Campos
Here's a workaround that will fix the current chrome bug:
.element-that-holds-pictures {
perspective: 1px; /* any non-zero value will work */
}
This won't affect the display at all (unlike the opacity:0.99 workaround - which is great workaround, too, by the way).
Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.
There is a much simpler solution.
Just add overflow:hidden to the container that has the border-radius and holds the child elements. This prevents the children 'flowing' over the container.. Thus fixing the problem and showing the border-radius
Try the following css to the child elements of the element with border-radius set:
opacity:0.99;
It solves the problem and doesn't change the opacity much.
This worked perfectly for me.
It looks like you need to apply the border radius to the li element:
#slides li {
display: block;
float: left;
height: 300px;
width: 960px;
position: relative;
border-radius: 10px;
}
It very much does have a border radius:
(I just added a border with Chrome's dev toolbar.)
The border radius doesn't restrict its contents to within the resulting area—the space outside the corners are still occupiable by the element's contents.
My recommendation would be to overlay an image that had the corners cut out like that (and then use a map or whatever you feel comfortable with to still enable the left/right arrows).
I have used two div tags in my blog to wrap programming codes. The first one is used to set outline box with fixed width with the following CSS class:
.outlinebox {
width: 435px;
border-width: 1px; /* sets border width on all sides */
border-style: solid;
border-color: #666666;
padding: 5px
}
The second div is used as inner box to set nowrap for codes with the class:
.nowrappercodesinner {
width: auto;
padding: 5px;
overflow: auto;
white-space:nowrap;
}
I use those div tags for my codes in my blog. They work fine until I tried to add third div as inner area with a specific background colour. For example:
<div class="outlinebox">
<div class="nowrappercodesinner">
<div class style=""background-color:#cccccc;">
...
</div>
</div>
The problem is that the background colour does not extend to the right when I move the horizontal scroll bar to the right. I am not sure if there is any way that the inner background colour will fill no matter where the scroll bar is moved.
Here I have one example in my recent blog: Zip Files with PowerShell Script. You can see the problem in the third code block.
overflow: auto;
in the innermost div might help. At least it had the desired effect when I added the property in Firebug. I find it strange, still, because I thought auto is supposed to be the default setting.
EDIT: Default value for overflow seems to be visible.
Perhaps I'm missing something, but why do you need the third div? Couldn't you just put the background color on the second div? I tried this on your blog in webkit's inspector and it displayed just fine.
<div class="outlinebox">
<div class="nowrappercodesinner" style="background-color:#cccccc;"></div>
</div>
I have a div which has style properties as "border-top, left, right, bottom" set.
But I do not want the border top to complete the box (which would be a rectangle). I want a small (About 2-3px) opening at the top right (on the length side of the box).
How can this be done?
I think there is a property in CSS called "border-top-width" but there is no "border-top-length".
Can it be done using CSS? Any other approaches are also welcome.
Thanks...
I don't think that's possible...The only way I can think of is to hack it with creating another element inside it (1px wide, 3px high), float it right, and then do margin-right: -1px...
<div style="border:1px solid black; background-color: white;">
<div id="borderHack"></div>
Your content here
</div>
And style the "hack" element like so:
#borderHack {
float: right;
margin-right: 1px;
background-color: white; /*This would have to be the same as the background*/
height: 3px;
width: 1px;
}
You will have to set border-top to none and then put another DIV into that container DIV. Then set the inner DIV's border-top and set it's width to be smaller than the container's.
I don't believe you can do this with CSS alone.
You could add an inner div that has the background color of the color you want at the opening. You would then position and size the inner element so that it appears to be a gap.
You can do that using what's explained in this link http://www.css3.info/preview/border-image/
Basically what you would do is draw a box without the top corners and assign it as border-image
Edit: But this is only available in CSS3 and not implemented by many browsers so for now the other answers give a practical solution.
You might as well try this (relative+absolute positioning) almost the same with float:
<div style="width:400px;height:300px;border-top:1px solid black; border-right:1px solid black;border-bottom:1px solid black;position:relative;">
some content here
<div style="width:2px;height:3px;position:absolute;right:0;background:gray;"></div>
</div>