How do I create these round borders?

Question

I'm not sure how to create these round borders. I was thinking maybe create pseudo elements with a border radius but it didn't work. Any help is appreciated.

body {
 padding: 10px;
 background: grey;
}

.card {
  height: 500px;
  width: 400px;
  background: black;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  position: relative;
}

.link-box {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: white;
  border-top-left-radius: 10px;
}

<div class="card">
  <div class="link-box"></div>
</div>

Answer 1

You could try something like this, using ::before and ::after:

* {box-sizing: border-box}

body {
 padding: 10px;
 background: grey;
}

.card {
  height: 490px;
  width: 390px;
  background: black;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  position: relative;
  border: 10px solid white;
  border-width: 0 10px 10px 0;
}

.card::before {
  content: "";
  position: absolute;
  background-color: black;
  width: 0;
  height: 430px;
  border-right: 10px solid black;
  border-radius: 0 10px 10px 0;
  top: 0;
  right: -10px;  
}

.card::after {
  content: "";
  position: absolute;
  background-color: black;
  width: 330px;
  border-bottom: 10px solid black;
  border-radius: 0  0 10px 10px;
  left: 0;
  bottom: -10px; 
}

.link-box {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background: white;
  border-top-left-radius: 10px;
}

<div class="card">
  <div class="link-box"></div>
</div>