CODEWITHSUNDEEP
htmlcss
user2844155
user2844155

Reputation: 13

Applying border-radius without applying it to box-shadow

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!

Upvotes: 0

Views: 1023

Answers (1)

Michael Irigoyen
Michael Irigoyen

Reputation: 22947

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/

Upvotes: 5

Related Questions