I have two panel with border-radius properties applied to it. Both panels have elements inside them with there own background colours and borders. Both panels are scrollable. In the case of the first panel as the div is scrolled the background colours and borders accept the border radius of the container as the edge, whereas in the second panel the borders and background colours of the inner elements overlap the corners with their straight edges. Why?
The behaving panel ::
#coursepack .corecol .extention .dirpanel {
background-color:#222;
border-top-left-radius:10px;
border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
height:322px;
width:304px;
border:1px solid #AAA;
overflow:hidden;
}
The misbehaving panel ::
#coursepanel .opsextention {
position:absolute;
width:320px;
height:410px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
z-index:2;
opacity:0.80;
left:358px;
top:20px;
background-color:#222;
-webkit-box-shadow: 0px 0px 10px #FFF;
-moz-box-shadow: 0px 0px 10px #FFF;
box-shadow: 0px 0px 10px #FFF;
overflow:hidden;
}
Solve a Fiddle http://jsfiddle.net/3V8T8/5/ notice the borders penetrating the corners
Here is a fiddle showing both. The second one shows working rounded corners, but I see not what the difference is http://jsfiddle.net/3V8T8/10/
Remove the height and line height from the .opsextention .teetime class then use padding:10px 25px 10px 25px to space it out and that grey line does not go outside the corner
Related
I'm applying a 2px bottom border to a text field with a 4px corner radius on the container. Since the radius is larger than the border, it causes the border to curl around the edge. I want the border to stay flat along the bottom edge.
[DON'T want this: border wrapping border radius] https://imgur.com/JEfIkDE
[DO want this: bottom border remains straight]
https://imgur.com/xkuQGME
I haven't found a way to fix this within the CSS. Will I have to place another div inside the container to make this work? Basically a 2px high box at the bottom of the container? If so, I would appreciate any help on how that would be structured.
.textfield {
border-bottom: 2px solid #1A1446;
border-radius: 4px;
}
Use a gradient at the bottom:
.box {
width:200px;
height:100px;
border-bottom:5px solid transparent; /*keep it transparent*/
background:
linear-gradient(#1A1446,#1A1446) bottom/100% 5px border-box no-repeat,
yellow;
border-radius: 10px;
}
<div class="box"></div>
If you simply want the visual you can omit the border
.box {
width:200px;
height:100px;
background:
linear-gradient(#1A1446,#1A1446) bottom/100% 5px no-repeat,
yellow;
border-radius: 10px;
}
<div class="box"></div>
In CSS I know you able to do a four sided box-shadow. Just wondering whether you are able to select two sides. (Just the left side and the right side). I know there is a question already on this but it didn't provide any useful information.
Thanks
You can use multiple box-shadows to achieve the effect
div{
width:100px;
height:80px;
margin:50px;
background:orange;
box-shadow:-50px 0px 5px 0px grey,50px 0px 5px 0px grey;
}
<div></div>
Not sure what you mean by a four sided or a two sided box shadow. A box shadow consists of a color, x offset, y offset, blur radius and a spread radius.
So box-shadow:red 2px 2px 0px 0px; would only show a red shadow on 2 sides of the element.
Also you can use multiple box shadows at once by seperating them with a comma like this.
div {
height:100px;
width:100px;
margin:100px;
box-shadow:red 0px 2px 0px, blue 2px 0px 0px, green -2px 0px 0px, yellow 0px -2px 0px;
}
<div></div>
Hope this helps.
you can just add this class to achieve your goal-
.shadow-left-right {
box-shadow: -5px 0 5px -5px #333,
5px 0 5px -5px #333;
}
I have a div with a padding and I would like to add an "internal" border, considering padding. For example, consider to have this CSS:
div#border {
padding:10px;
border:1px solid;
background-color:#ccc;
}
My goal in this case is to create an internal solid border, far 10px from div border, but I only get an external border (jsFiddle). Adding an internal div does the trick but adds an extra HTML element (jsFiddle):
div#border {
padding:10px;
background-color:#ccc;
}
div#internal {
border:1px solid;
}
I've tried to add an outline as suggested here, but when I have two adiacent divs with outline, there's an overlap between (jsFiddle).
Is there a pure-CSS solution to add an "internal" border to a div, considering padding, without adding extra HTML elements and without overlapping on adiacent divs?
Solution #1 Use box-shadow with inset
We can take advantage of the fact that multiple values can be used for the box-shadow property.
The trick here is to set the first inner shadow with the background color of the div, and the second inner shadow - which is slightly larger - with the color of the border.
FIDDLE
div#border {
padding: 10px;
box-shadow: inset 0 0 0 9px #ccc, inset 0 0 0 10px black;
background-color: #ccc;
}
<div id="border">some content</div>
Solution #2 Use outline with the outline-offset property.
outline:1px solid;
outline-offset: -10px;
FIDDLE
div#border {
padding: 10px;
outline: 1px solid;
outline-offset: -10px;
background-color: #ccc;
}
<div id="border">some content</div>
I'm using the following css technique to design a box shadow around a div element...
-webkit-box-shadow:0 0 10px #303030;
-moz-box-shadow:0 0 10px #303030;
box-shadow:0 0 10px #303030;
But is there a way to tell the css to stop the shadow effect at the top of the div? I just want to the left, right and bottom of the div element to have the effect.
Thanks for any advice
Demo
div{
height: 300px;
width: 300px;
-webkit-box-shadow:0 5px 10px #303030;
-moz-box-shadow:0 5px 10px #303030;
box-shadow:0 5px 10px #303030;
}
To entirely get rid of the top shadow without lengthening the bottom shadow, my solution would be to include another element inside the div with a white background and absolutely position it to hide the top shadow.
<div>
<span></span>
</div>
div {
margin-top:20px;
height:300px;
width:300px;
-webkit-box-shadow:0 0 10px #303030;
position:relative;
}
span {
display:block;
position:absolute;
top:-10px;
height:10px;
width:100%;
background:#fff;
}
http://jsfiddle.net/QE8Bh/1/
According to the specifications, the second value is the vertical inset. Just update that value in order to have a "drop shadow" effect:
box-shadow: 0 10px 10px #303030;
Also, check this article for some other cool effects you can achieve with box-shadow.
This question already has answers here:
Outline radius?
(24 answers)
Closed 2 years ago.
So I have these four boxes, floated left, each with a 50% width of the page. I want them to have an outline of 1px solid gray, and I want to round the corners with 6px. I know I could use border:1px solid gray; and border-radius:6px; but the problem is that border adds width to the element. And because the boxes have 50% width, and they're floated left, I can't add a border to them. So is it possible to make outline corners round?
Edit:CSS-only solution would be best, because I need to support every browser excluding IE6.
You can still do this with borders by using box-sizing. It includes the border's width in the elements total width and is fairly supported.
My idea is untested, but how about using the 50% divs as containers for your actual divs with border?
The bordered-divs then have height and width to auto and set their left, right, top and bottom to 0px
There is a workaround as per this answer. But you would still have to set outline:0 and use border-radius and/or box-shadow.
use following css property to make rounded corner border
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;
If you use this. please post some codes you used. Then only we can able to find the errors or any modification need ...
Thanks
The best way to have control on borders is to use box-shadow. It keep rounded corners and can be outside or inside (with inset).
Exemple :
box-shadow: 0px 0px 0px 2px black;
/*outside border black 2px width*/
box-shadow: 0px 0px 0px 2px black inset;
/*inside border black 2px width*/
Another way to do this is to use the OUTLINE property as well as a BORDER-RADIUS of 80 pixels. Like followed:
outline: 5px #FFF;
border-radius: 80px;
This works for small images, not too large of ones. If you want to use the round edge system on larger images, you will have to do just as someone else stated and use the following code:
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;