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;
Related
While using CSS3's box-shadow I am having an issue I do not usually have.
The box shadow usually just bleeds over the div edges, but not on this one.
box-shadow that is being cut off on the top and right hand side..
Heres the css I'm using for box-shadow:
-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
box-shadow: 0 0 5px #555;
Cheers
The problem is your center-main div is cropping off the edge of the shadow. Set overflow:visible on this and you should see it.
If box-shadow is being cut-off, make sure overflow:visible is set on any div(s) your element is contained in.
use padding + negative margin like:
.img {
padding: 10px;
margin: -10px;
}
I have run into this problem multiple times with IE, and the best solution I've found is to use a transparent outline around the div. This seems to prevent IE from clipping the box shadow, as it does even in cases where Gecko and Webkit don't. One great thing about using outline to fix this problem is that it doesn't affect the position of the div.
For example, I had a div with which I had used position: absolute and bottom: -30px to put it in a certain place relative to its parent div. IE, and only IE, was cutting off the top and bottom of the box shadow. Adding this outline fixed it, without changing the position.
outline: 10px solid transparent;
you can set this style img tag for show shadow-box correctly
.img{
margin:20px;
-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
box-shadow: 0 0 5px #555;
}
you can use
.img{
filter: drop-shadow(0 0 5px #555);
}
instead
I managed to resolve the same issue on my local project by setting the image to have the following css property:
position: relative;
I've also encountered this issue. In these cases I add position: relative and a z-index to the box shadow container.
Please see this fiddle for a visual.
Here's my source image:
And my source image zoomed in:
Any thoughts on how to accomplish this with only CSS3? Notice the slight bleed upwards into the element.
Update: I've removed the vendor prefixes, since almost every browser that supports these properties do not need them. Dropping them is considered a best practice at this point.
See Caniuse page for border-radius and box-shadow.
the best (and only) way to do this is to use multiple box-shadows:
element {
box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
border-radius: 20px;
}
box-shadow works like this:
box-shadow: [direction (inset)] [color] [Horizontal Distance] [Vertical Distance] [size];
border-radius works like this:
border-radius: [size];
/*or*/
border-radius: [topleft/bottomright size] [topright/bottomleft size];
/*or*/
border-radius: [topleft] [topright] [bottomright] [bottomleft];
you can specify the Height an length of the curve like this:
border-radius: [tl-width] [tr-width] [br-width] [bl-width] / [tl-height] [tr-height] [br-height] [bl-height];
It's just using two box shadows, one inset and the other outset, i.e:
.box {
width: 100px;
height: 100px;
box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 3px rgba(0,0,0,0.1);
border: solid #ccc 1px;
border-radius: 10px;
margin: 50px 0 0 50px;
}
See it here: http://jsfiddle.net/WYLJv/
This is actually done with two CSS3 box-shadows.
CSS:
#fuzz
{
height: 100px;
width: 100px;
border-radius: 5px;
border: 1px solid #333;
box-shadow: 0px 0px 5px #333, inset 0px 0px 2px #333;
}
You can see it in action when i get back to real computer to edit the fiddle :-) (using my tablet now)
Obviously change the colors to your taste :)
Look at css3 property border-radius. It has options for x and y offset color and the blur radius. In your case a greyish color no offset and blur if 4px ought to work.
I'm a bit late but, yes, use border radius and box-shadow(s) and you should be good to go.
.block {
border-radius:6px;
box-shadow: inset 0px 0px 2px 2px #aaa, 3px 3px 5px 0px #eee;
}
Try adding a border-radius and a text-shadow in your css.
.box {
border-radius:20px;
text-shadow:2px 2px black;
}
Hope this helps.
You can probably just get away with setting the border to a light colour and outline to a darker colour, then just set the border-radius. Note I haven't tested this, and if memory serves the outline does not curve with border-radius. Also note that border-radius requires several attributes to be set to become cross-browser compatible. Refer to http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/ for more info.
If this fails, you could always use an inner-div, which you set to position absolute, left 0, right 0, top 0 and bottom 0 and then use that as either the inner or outer border. Setting the border-radius will definitely work then.
Regards,
Richard
I'm wondering if it's possible to achieve this effect only with css. As you probably noticed the image have 4 borders if you zoom in a little bit(without that bottom shadow, I don't want to use that).
img http://img265.imageshack.us/img265/192/version203.jpg
It appears that the most outward border is already done using CSS with a simple border effect. The outermost border would be a box with a border and some padding to push the image inside. Then going down to the grey box, you could use another box with border: 3px double since the border color is the same as the background color, and adding background-clip: padding-box so that the background will not cover the white line between the double border. It also appears there would be around a 3px border radius on that box and some padding until you get to the actual image which simply has a white border around it.
A simple example of CSS:
span.imgbox {
background: #CCC;
background-clip: padding-box;
border: 3px double #CCC;
border-radius: 3px;
display: inline-block;
padding: 10px;
}
span.imgbox > img {
border: 1px solid #FFF;
}
This is generally what would be involved, assuming you don't want the white box with black border as shown in the actual website view, but just the borders you want that are shown in the image itself.
With box-shadow you can emulate multiple borders. This is exactly what you're looking for:
http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow/
you could mix box-shadow, outline, border, and padding/background-color... but this wouldn't be cross browser..
border: 4px solid #000;
outline: 4px solid #f00;
background-color: #ff0;
padding: 10px;
box-shadow: 0px 0px 0px 4px #333;
demo
I think the only way is to have nested elements.
Is it possible to have the shadow surround the entire DIV?
-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;
I know the order of attributes goes:
Horizontal offset
Vertical offset
Blur radius
Color
But I wonder if it's possible to make the shadow go all around it instead of showing up only on one edge or side.
You're offsetting the shadow, so to get it to uniformly surround the box, don't offset it:
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;
Yes, don't offset vertically or horizontally, and use a relatively large blur radius: fiddle
Also, you can use multiple box-shadows if you separate them with a comma. This will allow you to fine-tune where they blur and how much they extend. The example I provide is indistinguishable from a large outline, but it can be fine-tuned significantly more: fiddle
You missed the last and most relevant property of box-shadow, which is spread-distance. You can specify a value for how much the shadow expands or contracts (makes my second example obsolete): fiddle
The full property list is:
box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-distance] [color] inset?
But even better, read through the spec.
Just use the below code. It will shadow surround the entire DIV
-webkit-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
Hope this will work
The CSS code would be:
box-shadow: 0 0 10px 5px white;
That will shadow the entire DIV no matter its shape!
Use this below code
border:2px soild #eee;
margin: 15px 15px;
-webkit-box-shadow: 2px 3px 8px #eee;
-moz-box-shadow: 2px 3px 8px #eee;
box-shadow: 2px 3px 8px #eee;
Explanation:-
box-shadow requires you to set the horizontal & vertical offsets, you can then optionally set the blur and colour, you can also choose to have the shadow inset instead of the default outset. Colour can be defined as hex or rgba.
box-shadow : inset/outset h-offset v-offset blur spread color;
Explanation of the values...
inset/outset -- whether the shadow is inside or outside the box. If not specified it will default to outset.
h-offset -- the horizontal offset of the shadow (required value)
v-offset -- the vertical offset of the shadow (required value)
blur -- as it says, the blur of the shadow
spread -- moves the shadow away from the box equally on all sides. A positive value causes the shadow to expand, negative causes it to contract. Though this value isn't often used, it is useful with multiple shadows.
color -- as it says, the color of the shadow
Usage
box-shadow:2px 3px 8px #eee; a gray shadow with a horizontal outset of 2px, vertical of 3px and a blur of 8px
I'm having trouble rounding the corners of an img using CSS3:
This is the code I'm using:
img.event-thumbimage {
height:120px;
width:140px;
-webkit-box-shadow: 0px 0px 10px 0px #4d4d4d;
-moz-box-shadow: 0px 0px 10px 0px #4d4d4d;
box-shadow: 0px 0px 10px 0px #4d4d4d;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
border:solid white 3px;
float:left;
margin-right:25px;
}
As you can see, the outer border is rounded but the actual img is squared off. Using CSS3 how can I round the corners on the actual image as well?
use two containers, both with the rounded corners (not the img), and don't forget the overflow: hidden on the inner:
example code here:
http://jsfiddle.net/jackJoe/YhDXm/
A similar answer to the previous two. Use a span around the image and apply the border-radius to both.
There is a more detailed walkthrough here: http://easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html
Some browsers are starting to handle this better, but there are still instances where the square of the image shows through.
Put a <div> around the image and apply the border-radius to that wrapper. Add overflow: hidden; and you're good to go. This is because <img> tags can't have rounded corners.