Chad Chad - 2 months ago 16
HTML Question

CSS border-radius and border

What I'm trying to do is this:

1

So I gave my banner a border-top-right-radius of

100px 20px
. I was kind of able to copy the border-radius in the image. The problem is that I couldn't copy the border. I tried applying
border:10px solid #fff
and it looks distorted/weird. Here's what I have right now:

2

Answer

With this work around you could get what you want i tried it with border but that doesn't seem to work.

body{background: gray;}
.wrapper {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 50px auto;
  }
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(https://scproxy-prod.adobecc.com/api?X-Location=https%3A%2F%2Fcc-eu1-prod.adobesc.com%2Fapi%2Fv1%2Fassets%2F3fd53348-7e53-46f1-a1fa-f03a8fe5cb6c%2Frenditions%2Fjpg%2F1200?&v=1473018134655&Authorization=Bearer%20eyJ4NXUiOiJpbXNfbmExLWtleS0xLmNlciIsImFsZyI6IlJTMjU2In0.eyJmZyI6IlFYMjdaT0RKQU1BQUFBQUFBQUFBQUFFTEFBPT09PT09IiwiYXMiOiJpbXMtbmExIiwiYyI6ImhpdWExbFdqQTBzbVpoTFhZSnFqUkE9PSIsInVzZXJfaWQiOiI0ODQ0MjkxRTRGNzA3ODgxMEE0OTBENDVAQWRvYmVJRCIsIm1vaSI6IjE5OTZlMGRiIiwic2NvcGUiOiJBZG9iZUlELG9wZW5pZCxnbmF2LGNyZWF0aXZlX2Nsb3VkLHJlYWRfb3JnYW5pemF0aW9ucyxhZGRpdGlvbmFsX2luZm8uc2NyZWVuX25hbWUsYWRkaXRpb25hbF9pbmZvLnNlY29uZGFyeV9lbWFpbCxhZGRpdGlvbmFsX2luZm8ucm9sZXMsc2FvLmNjcHJpdmF0ZSxzYW8uY2NfZXh0cmFjdCxzYW8uY2NlX3ByaXZhdGUsYWNjb3VudF90eXBlLHNhby5jY3B1Ymxpc2giLCJjcmVhdGVkX2F0IjoiMTQ3MzQ0MDQwOTU5NyIsImlkIjoiMTQ3MzQ0MDQwOTU5Ny0xNjBiYjc2Yy0xNmU0LTQzOTctYjY1ZC0wMDQ4NWQ5M2EzMWMiLCJ0eXBlIjoiYWNjZXNzX3Rva2VuIiwiZXhwaXJlc19pbiI6Ijg2NDAwMDAwIiwiY2xpZW50X2lkIjoiQ3JlYXRpdmVDbG91ZFdlYjEifQ.kgR1X7vFpAnkrQGyY2jbo4dtxPSsugHw4ms9ij-hDbrvJdsr2vO_n3GhbRDlzCA1BSkvbkg54c5w2x4lYiRS965VauxjwmLYlUHsEMCBXQmsMmf-_iT68AL-lh9kcec-y10XVBlYk96KQw84PFHn03x1eQK3xXtlrrtmWhys5lcsjZc2dklrfbcy4TlDYWQfYACCaEg4up3_BVZljr3r8u11eF40tormcJTLW7HqFRQf2QL3IP6u2vu3flSBI5wd_XDQGXusF424Exsv1VV4as24e994w3jH_GvUDo8sffCQFJmb5lEfWZOxwG6SUHAbmYG501FDepjlCaGIp7tCdQ);
  background-size: cover;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-top-right-radius: 100px 20px;
  z-index: 2;
  }
.border {
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  width: 100%;
  height: 100%;
  border-top-right-radius: 96px 22px;
  z-index: 1;
  }
<div class="wrapper">
  <div class="image"></div>
  <div class="border"></div>
</div>