58

Ok, I know neither of these properties are completely supported yet, but I'm using them anyway :P

When I add a border-radius and box-shadow (with and without vendor prefixes), the radius of the border-radius is not transparent to the box-shadow. Example: http://cndg.us/3f41a0

Is this possible to fix? I've also noticed that -webkit-box-shadow has some issues with hidden divs.

6 Answers 6

79

it is possible check here: http://jsfiddle.net/Zw4QA/1/

i think you have a element inside your div with the rounded corders. You have to apply the corners to this element to. At the moment rounded corners on the parent element will not apply to the children unless you specify it in your CSS.

for more CSS3 magic check this link: http://css3please.com/

Be aware that every single browser has his own way of handling Shadows and border radius http://thany.nl/apps/boxshadows/

1
  • border-radius + box-shadow does still break in safari for large values (i.e. if you're using box-shadow to create a semi-transparent background for an overlay), but works in other modern browsers: jsfiddle.net/Zw4QA/1622 Sep 22, 2017 at 0:33
3

Sometimes if you have overflow: hidden CSS property in the parent element, it can also crop the shadow of the child elements. Make sure to remove it and it should work fine.

1
  • that was my case thank you Oct 4 at 7:27
2

For table with cells:

JSFiddle

HTML

<table>
    <tr>
        <td class='one'>One</td>
        <td class='two'>Two</td>
    </tr>
    <tr>
        <td colspan="2" class='three'>Three</td>
    </tr>
</table>

CSS

body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 padding: 100px;
 background: pink;
}

table {
/* basic */
 background-color: #fff;
 margin: 0 auto;
 width: 200px;
 padding: 100px;
 text-align: center;
/* border-radius */
 border-radius: 20px;
/* box-shadow */
 box-shadow: rgba(0,0,0,0.8) 0 0 10px;
 border-collapse: collapse;
}

table td{
  color: white;
}

td.one{
    border-radius: 20px 0 0 0;
    background-color: black;
}
td.two{
    border-radius: 0 20px 0 0;
    background-color: darkgreen;
}
td.three{
    border-radius: 0 0 20px 20px;
    background-color: darkred;
}
3
  • any chance you can explain this code so that someone who comes along later can understand it, and why it might be an answer to the question posed? Sep 28, 2012 at 6:29
  • I thought that fiddle example will be enough. Border-radius and border-shadow works well for table, but border-radius don't limit table cells.They require own border-radius matched to table border-radius to limit background fill. You even don't notice that while you don't use cell background.
    – dylfin
    Nov 21, 2012 at 9:53
  • I would say that this is a better solution than the accepted answer. Only thing it lacks is an explanation. Jun 9, 2020 at 12:42
2

According to the documentation at MDN, a box-shadow automatically picks the border-radius of the element itself. Here is a link: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#:~:text=The%20box%2Dshadow%20property%20enables,on%20the%20same%20rounded%20corners

0

You can create a border-radius to div or box-shadow will create only shadows

generator border radius and box shadow find live code: https://css-box-shadows.com/css-box-shadow-generator/

-9

While dinking around on my father's website I discovered that you can add the radius characteristic to shadow. So I have a calendar inside a div, both have rounded edges (0.7em to be exact) and I wanted to add a drop shadow to it, but those almost always have a square edge and as such would clash with my rounded edges. Just messing around with box-shadow attribute and decide what if I add radius to it? So I did. Can't find anywhere online that mentions this technique so I might have discovered something unique. Anyways enough back story here's the codes:

CSS:

box-shadow-bottom-right-radius: 0.7em; //you can enter whatever value you want
box-shadow-bottom-left-radius: 0.7em;
box-shadow-top-right-radius: 0.7em;
box-shadow-top-left-radius: 0.7em;

There you go so you're adding a radius to the box shadow itself like you would normally do to a border.

1
  • 2
    This are the unknown property of css.
    – Rutvij07
    Apr 6, 2022 at 9:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.