Is it possible to make this with CSS?

Question

Is there a good way to make this with HTML/CSS? Basically a div, that has a circle "bump" on the edge. That part is easy using pseudo classes, but my problem is making the drop shadow treat it as part of the shape.

When I apply a drop shadow the circle separately, it doesn't work reliably. I know there's a way to do this..but I am unsure what the browser support is.

What would you guys recommend is the best way to tackle this? Thanks!

Answer 1

You can use the border-radius function in css3, but the best way is to do it with an image.

An example of the border-radius:

html

<div id="wrap">
<div class="round">
    Border
</div>
</div>

css

html,body{
    background-color: #ccc;
    padding: 0;
    margin: 0;
}

#wrap{

    background-color: #fff;
    padding: 20px;
    width: 44%;
    margin: 20px;
    position: absolute;
    z-index: 1;
}

.round{
    width: 200px;
    padding: 20px;
    background-color: #fff;
    border-radius: 50px;
}

A jsfiddle example:

http://jsfiddle.net/RpE4G/

Answer 2

You can come close to this with a bunch of CSS. See this JSFiddle for a live example. However, there are disadvantages:

• Bad support in IEs below 9
• Not pixel-perfect, since some box-shadows overlap
• The container must have position: relative (or absolute)

The CSS:

div {
    margin: 100px;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 10px black;
    border-radius: 10px;
    position: relative;
}

div:before {
    display: block;
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    left: -20px;
    top: 30px;
    border-radius: 20px;
    box-shadow: 0 0 10px black;
    clip: rect(-10px, 20px, 50px, -10px);
}

Answer 3

Yes you can do this, but it's a good amount of manual tweaking to get something that what would be easier to accomplish with an image.

Essentially the problem lies with the shadow, and to get around this you have to create a sandwich of elements using positioning and z-indexes. You need one round element positioned behind the rectangular one, and then a copy of the round element on top of the rectangular one. Then there's the other issue of using CSS3 properties like shadows and gradients which will cause browser compatibility problems.

Here's a jsFiddle example.

Obviously the issue with the example is getting the gradients to mat perfectly, which I didn't spend much time on.

#circ {
    border-radius: 40px;
    width:40px;
    height:40px;
    box-shadow: 0px 0px 10px #999;
    position: absolute;
    left: 37px;
    top: 77px;
    background: #fcfcfc;
    position:absolute;
    left: 40px;
    top:75px;
    /* Old browsers */
    background: -moz-linear-gradient(top, #fcfcfc 0%, #cccccc 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #cccccc));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fcfcfc 0%, #cccccc 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fcfcfc 0%, #cccccc 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fcfcfc 0%, #cccccc 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #fcfcfc 0%, #cccccc 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#cccccc', GradientType=0);
    /* IE6-9 */
    z-index: -1;
}
#rect {
    width:200px;
    height:80px;
    background: #fcfcfc;
    position:relative;
    left: 50px;
    top:50px;
    box-shadow: 0px 0px 10px #999;
    /* Old browsers */
    background: -moz-linear-gradient(top, #fcfcfc 0%, #cccccc 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #cccccc));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fcfcfc 0%, #cccccc 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fcfcfc 0%, #cccccc 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fcfcfc 0%, #cccccc 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #fcfcfc 0%, #cccccc 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#cccccc', GradientType=0);
    /* IE6-9 */
}

#circ2 {
    border-radius: 40px;
    width:40px;
    height:40px;
    position: absolute;
    left: 37px;
    top: 77px;
    background: #fcfcfc;
    position:absolute;
    left: 40px;
    top:75px;
        /* Old browsers */
    background: -moz-linear-gradient(top, #fcfcfc 0%, #cccccc 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #cccccc));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fcfcfc 0%, #cccccc 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fcfcfc 0%, #cccccc 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fcfcfc 0%, #cccccc 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #fcfcfc 0%, #cccccc 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#cccccc', GradientType=0);
    /* IE6-9 */
}

Answer 4

Making this with CSS adds only overhead. I would advise using a simple background image. With CSS3 you have great control over positioning, transparency etc.

Probably more important, it creates a layer of 'confusion' for other developers if they have to work with your code. Keep it clean. If you need to display an image, use an image.

Answer 5

To be honest, an image, if you want it to make it work on mozilla, safari and chrome. It can be done with css3 but I wont recommend it.