CODEWITHSUNDEEP
htmlcssborder
Austin
Austin

Reputation: 1291

Apply border-radius to box-shadow but not to the div itself

I want to apply a border radius to a box-shadow but not the div itself, so the end result will be a rounded box shadow on the left side with 90 degree angle div.

.div-to-style {
    -webkit-box-shadow: -20px 0px 0px 0px blue;
    -moz-box-shadow: -20px 0px 0px 0px blue;
    box-shadow: -20px 0px 0px 0px blue;
    border-radius: 8px 8px 8px 8px;

    background-color: red;
    width: 200px;
    height: 50px;
    margin-left:40px;
}
<div class="div-to-style">
</div>

<p>
Want the red section to have a straight border on the left
</p>

https://jsfiddle.net/alair016/vdcohttk/

The problem with this CSS is that the border-radius is applied to the box-shadow as well as the div on the left side.

Upvotes: 2

Views: 3516

Answers (3)

Paulie_D
Paulie_D

Reputation: 115045

The box shadow is not an element. You can't add border-radius to an effect.

Try a pseudo-element instead:

.div-to-style {
  border-radius: 0 8px 8px 0;
  background-color: red;
  width: 200px;
  height: 50px;
  margin-left: 40px;
  position: relative;
}
.div-to-style::before {
  content: '';
  position: absolute;
  left: -20px;
  width: 20px;
  height: 100%;
  background: blue;
  z-index: -1;
  border-radius: 8px 0 0 8px;
}
<div class="div-to-style">
</div>

Bonus Option: No pseudo-element - Gradient background

.div-to-style {
  border-radius: 8px;
  background: linear-gradient(to right, blue, blue 20px, red 20px);
  width: 200px;
  padding-left: 20px;
  height: 50px;
  margin-left: 40px;
  position: relative;
}
<div class="div-to-style">
</div>

Upvotes: 5

Kenyon
Kenyon

Reputation: 817

The gist is, you need 2 divs. Add the box shadow and radius to the outer div, and the other background or border styles to the inner div.

.div-to-style {
        -webkit-box-shadow: -20px 0px 0px 0px blue;
        -moz-box-shadow: -20px 0px 0px 0px blue;
        box-shadow: -20px 0px 0px 0px blue;
        border-radius: 8px 8px 8px 8px;
        margin-left: 40px;
    }

.inner-style {
  background-color: red;
        width: 200px;
        height: 50px;
}

<div class="div-to-style">
<div class="inner-style">
</div>
</div>

<p>
Want the red section to have a straight border on the left
</p>

Here is a code example: https://jsfiddle.net/vdcohttk/2/

== Edit

If you're going to downvote, please write a comment explaining why. Thanks!

Upvotes: -1

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60527

You can use a pseudo-element to create the shadow, and apply the border-radius to that pseudo-element.

Working Example:

.div-to-style {
    background-color: red;
    width: 200px;
    height: 50px;
    margin-left:40px;
}
.div-to-style:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -1;
    -webkit-box-shadow: -20px 0px 0px 0px blue;
    -moz-box-shadow: -20px 0px 0px 0px blue;
    box-shadow: -20px 0px 0px 0px blue;
    border-radius: 8px 8px 8px 8px;
}
<div class="div-to-style">
</div>

<p>
Want the red section to have a straight border on the left
</p>

Upvotes: 2

Related Questions