应用边界半径而不将其应用于框阴影

Question

Is there anyway to apply a border radius to a div, but without applying the same "roundness" to the box shadow? I'm using box-shadow without a blur to effectively create two borders for a div, but the light blue box-shadow needs to be squared off.

Thanks!

Answer 1

You can use the outline CSS property. ^{(Outline works in all browsers, except IE7 and below.)}

HTML:

<div class="box"></div>

CSS:

div {
    height: 20px;
    width: 20px;
}

.box {
    border-radius: 5px;
    outline: 1px solid black;
    background-color: red;
}

Fiddle: http://jsfiddle.net/xN4pF/

---

Or you can nest a <div> within another.

HTML:

<div class="shadow">
  <div class="round"></div>
</div>

CSS:

div {
    height: 20px;
    width: 20px;
}

.shadow {
    box-shadow: 0 0 0 1px black;
}
.round {
    border-radius: 5px;
    background-color: red;
}

Fiddle: http://jsfiddle.net/DzCK9/1/