How to create a inner border type color-CodePudding

Here is the current result: screenshot And here is the result I want screenshot.

here text is not a problem, only think is I need this inner radius type thing

Code:

<div style='
          display: "inline-block",
          marginTop: "2.5%",
          width: "60%",
          paddingBottom: "75%",
          borderRadius: "20px",
          borderBottom: "50px solid #FF6559",
          fontSize: "150%",
// more unrelated styles
        '></div>

tried to create another div

CodePudding user response：

Just have a parent element with two elements inside it.

.ticket {
  --border-radius: 1.5rem;
  background-color: #ff6559;
  border-radius: var(--border-radius);

  max-width: 200px;
}

.ticket > header {
  background-color: #d9d9d9;
  border-radius: var(--border-radius);

  min-height: 200px;
}

.ticket > footer {
  padding: 0.5rem;
  font-size: 1.5rem;
  color: white;
  text-align: center;
}

<div >
  <header></header>
  <footer>Some text</footer>
</div>