57

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.

Gary
  • 961
  • 3
  • 9
  • 16

6 Answers6

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/

meo
  • 30,872
  • 17
  • 87
  • 123
  • 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: https://jsfiddle.net/Zw4QA/1622/ – Timothy Zorn Sep 22 '17 at 00:33
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;
}
nhahtdh
  • 55,989
  • 15
  • 126
  • 162
dylfin
  • 51
  • 1
  • 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? – Andrew Barber Sep 28 '12 at 06: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 '12 at 09:53
  • I would say that this is a better solution than the accepted answer. Only thing it lacks is an explanation. – Sujit Kumar Singh Jun 09 '20 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

Daggie Blanqx - Douglas Mwangi
  • 2,309
  • 23
  • 28
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/

HARI PRASAD GANGI
  • 21
  • 1
0

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.

AngYC
  • 3,051
  • 6
  • 20
davidnguyen
  • 1
-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.

RCCRF
  • 1
  • 4