Html Question posted in
Some basic documentation can be found here.

Html – Creating a Rectangular curve shape with border

I am trying to create a exact rectangle curve shape [brown color] section with border as like in the below image

enter image description here

I able to create exact shape with mask css property but unable to add the border top to the div attached the code for the same and attached the current image below

.item-meta-container {
    --c: 50px;
    mask: radial-gradient(100% var(--c) at top, #0000 calc(100% - 1px), #000);
    background: #35090A;
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid #474747;
    width:500px;
    height:250px;
  }
<div class="item-meta-container"></div>

help me with adding the border top to the mask element as like in above image

current image with above css

enter image description here

Tags:

2

Answers


  1. 0

    In fact, using the mask css attribute will simply cut off the visible shape, and neither outline nor border will be displayed. (depends of the mask’s shape of course)

    The best way to do this would be to make this curved shape in a svg (and with the border/outline you’re looking for), and put it as a background image (much more flexible way).

    Login or Signup to reply.
  2. 0

    Use a similar gradient configuration with background to create the top border

    .item-meta-container {
  --c: 60px;                        /* adjust the -1px to control the thickness */
  mask:       radial-gradient(70% var(--c) at 50% -1px, #0000  calc(100% - 2px),#000);
  background: radial-gradient(70% var(--c) at 50% 0   , yellow calc(100% - 2px),#35090A);
  border-radius: 11px;
  border: 2px solid yellow;
  width: 500px;
  height: 250px;
}

body {
  background: #333
}
    <div class="item-meta-container"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search