How to add a black border to my scalloped border on my header banner

How to add a black border to my scalloped border on my header banner

annanguyen
Tourist
12 0 5

I already have a scalloped border on my header, but I want to add a black outline to it. I attached a screenshot of what I want it to look like. My website is: oliveandhaze.com. 

Here is what I have added to the bottom of base.css: 

}
.section-header .header-wrapper {
--mask:
radial-gradient(13.99px at 50% calc(100% - 19.20px),#000 99%,#0000 101%) calc(50% - 24px) 0/48px 100%,
radial-gradient(13.99px at 50% calc(100% + 7.20px),#0000 99%,#000 101%) 50% calc(100% - 12px)/48px 100% repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
margin-bottom: -19px;
}
.header-wrapper:has(details[open]) {
--mask: unset!important;
}

Screenshot_23-2-2025_171846_www.lightanddwell.com.jpeg

Replies 0 (0)