Kevin Powell - CommunityKP-C
Kevin Powell - Communityβ€’13mo agoβ€’
6 replies
smackalpha

Custom border in css

I am trying to make a custom border in style. I need the box to be like in first pic. I tried tweaking border radius but its not matching as per design, can someone help me with it.
codesandbox link: https://codesandbox.io/p/sandbox/xzzh99
Here's the code i tried
    <div
      style={{
        height: "100vh",
        background: "#7047EE",
        display: "flex",
        justifyContent: "center",
      }}
    >
      <div
        style={{
          background: "#fff",
          height: "30px",
          display: "grid",
          placeItems: "center",
          padding: "0px 10px",
          borderRadius: "0px 0px 10px 10px",
        }}
      >
        <div style={{ fontWeight: "bold" }}>IN 2HR </div>
      </div>
    </div>
Xnip2025-01-07_15-07-26.png
Xnip2025-01-07_15-23-48.png
Was this page helpful?