As shown above, can I give a radius to the top parts only and not to bottom or sometimes to bottom not to top?
And is there any idea to give border radius to one corner only?
Like border-radius:top-left top-right bottom-right bottom-left,
div{
width: 100px;
height: 30px;
background: black;
border-radius: 8px 8px 0 0
}
DEMO
Either use border-radius, such as:
border-radius: 5px 5px 5px 5px;
Or, for the top left border, you can be more specific with:
border-top-left-radius: 5px;
Here's the CSS for the rounded corners only on a div with a class of box:
.box {
border-radius: 5px 5px 0px 0px;
}
You may also find this helpful: http://css3generator.com/
Edit: Apparently you don't need the webkit prefix anymore!
Related
I have my column's borders change size when they are hovered on. But it moves the position of my image below them. I tried increasing the margin bottom of the columns so that it doesn't effect the image. But that did not work. I also tried using the z-index property, but that had no effect as well. What is the best way to fix this issue?
Code Pen: https://codepen.io/isaiahwebdev/pen/zWjyEJ
.plans-col {
width: 33.33%;
float: left;
padding: 10px;
margin-bottom: 40px;
text-align: center;
}
.plans-price:hover {
cursor: pointer;
border: 10px solid #eee;
}
.plans-price .title {
margin: 50px 0;
}
It's because of a border that is different width when you hover. Whenever you are applying any transformation, the borders need to stay the same width. The trick is to apply the transparent border for the object before hover.
.plans-price {
list-style: none;
border: 10px solid transparent;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.082), 0 6px 20px 0 rgba(0, 0, 0, 0.082);
}
.plans-price:hover {
cursor: pointer;
border: 10px solid #eee;
}
Now, I have seen that your original plans-price had border of 1px. You have a few options here:
use my solution where object doesn't have initial border,
keep my solution for the transparent border but add 'faux border' using solid inset box-shadow of 1 px and the desired color or
change the initial border width to 10px
Enjoy :)
So, my website has a header and a div containing Revolution Slider immediately after it. I'm trying to add a box-shadow below the header - and above the slider. But it doesn't work, unless I also add margin-bottom to the header - but that renders the whole exercise moot.
This is the code:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
Could someone help me figure out what's causing this?
See the following questions:
Does css border-shadow add to an element's size
Is css box-shadow part of element's box model?
According to the box-shadow spec:
An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only
So if you don't want overlap, you'll have to add the margin youself
#header {
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
margin-bottom: 10px;
}
#slider {
position: relative;
}
<div id="header">Header</div>
<div id="slider">Slider</div>
Actually, the issue turned out to be related to z-index properties of the different divs. With some tweaking I managed to get it all sorted out without using any margin.
Anyway, thank you all for your time and help!
If you need as you say the box-shadow below the header only and above the slider you can use minus in the last number in box shadow as the following:
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
This will make the box-shadow appear only at the bottom.
Working example:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
When you use the default rendering mode for box-shadow(outer shadow), you need to add a margin in that direction(10px on y-axis in your example) so the overflowed box content will be visible.
If you want to display your box shadow inside the header, just add the keyword inset to your declaration.
Never come across this issue before, and I cant see any other references to it. Basically, I have a website with rounded corners on the top and bottom containers. Now, these were working perfectly but have suddenly stopped since I started having issues with IMG DECODING FAILED. I've since resolved these (I think) but now, my rounded corners aren't working properly on the bottom of the container.
My CSS is as follows:
.sub_footer {
background: url(/uploads/images/blue_footer_bg.jpg)repeat-x;
color: #fff;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
text-shadow: 0px 1px 10px rgba(1, 1, 1, 1);
overflow: hidden;
}
I've used the css to make the rounded corner rather than images as I feel its a more dynamic technique.
This css is identical to the top container (except its top right and top left corners that are being rounded).
You can view the website here if you want to see it in action: http://1074796728.1071867011.temp.prositehosting.co.uk/ (this site wont let me post images)
The bottom corners are slightly rounded but to a different degree than the top, eventhough both declarations are for 15px.
Can someone help?
Hi now remove padded class you define in your sub_footer child and now
define your .sub_footer height: 30px; padding-top: 15px;
as like this
.sub_footer
{height: 30px;
padding-top: 15px;
}
Than Result is this
There is nothing wrong with the CSS You shold change the height of the Footer Div See
Thanks
Udit Bhardwaj
Try changing this one:
.sub_footer {
background: url(/uploads/images/blue_footer_bg.jpg)repeat-x;
color: #fff;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
text-shadow: 0px 1px 10px rgba(1, 1, 1, 1);
overflow: hidden;
}
To this one:
.sub_footer {
background: url(/uploads/images/blue_footer_bg.jpg)repeat;
color: #fff;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
text-shadow: 0px 1px 10px rgba(1, 1, 1, 1);
overflow: hidden;
}
Simpler solution is to
Just add padding:15px; to class col12 under sub_footer class
.sub_footer .col12{
padding:15px;
}
put webkit's on your border radius statements.
-webkit-border-radius:
-moz-border-radius:
http://thc-cup.ucoz.com/forum/2-1-1
After you can see, the left has a radius at content background and border, but the left one does not! I managed to get it like the one in the left after adding to the div style: display:inline-block; but that messes the box and moves it under the left block.
Since this is a forum (my link) I can't edit html, but I can edit the CSS of the forum.
Here is the style of those blocks:
.postTdInfo { //Left block
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
.posttdMessage { //Right block
margin: 0px 0px 0px 0px;
padding: 25px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 25px;
I searched all the day for a solution but can't seem to find one.
Is there any way of changing CSS so that the block accepts border radius?
Edit: my first answer didn't solve the problem.
The problem is that you're working on a td element, which has the display property by default set to table. Either add display: block; to .posttdMessage, or, if this causes problems, add another <div> element directly inside the table cell and style that with rounded borders instead.
For an element with 100% width and box-shadow defined such that it appears on the bottom only, how can I make the shadow appear consistent along the entire width of the element?
Currently, the shadow fades out at both the left and right edges; the shadow is noticeably different there than at the middle. Example:
<style>
body { padding: 0; margin: 0; }
h1 { margin: 0; box-shadow: 0 10px 10px #009;}
</style>
<h1>Bacon</h1>
Or see http://jsfiddle.net/RxVbt/1/.
Add a spread distance to counter the blur value. For a blur of 10px you need a spread of 5px (5px in each direction = 10px) For example:
h1 { margin: 0; box-shadow: 0 5px 10px 5px #009;}
See http://jsfiddle.net/RxVbt/9/
I did this by changing the h1 to include
margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px;
The negative margin pulls the shadow wide enough to appear the same all the way across. This is a bit crude and hackish, but it works.
try this:
h1 { margin: 0; box-shadow: 0px 10px #009;}
Add negative values for the end caps.
box-shadow: -5px -5px 10px 10px #009;
fiddle here
try this:
h1 { margin: 0; box-shadow: 0 2px 10px 8px #009;}
Example here