Rounded border with only inside of border rounded.

Hello!
https://playbook-nth.squarespace.com/ PW NTH2024#

Very little code experience so hoping someone could help me. I have managed to achieve rounded border bot on the outside not inside. The below works well because it scales between mobile and desktop. From my searches looks like the solution might have to use hml:

//Add Site Border to 7.1
body:not(.sqs-edit-mode-active) {
  &, #header {
    border: clamp(12px,3.5vw,80px)             solid #6789D3;     
        border-radius: 3.5vw;
  }
  #header { border-bottom: none; }
}

I want the border rounded only on the inside. I am trying to add a differnt color stroke around this inside border (see screenshot). I would like the option to have this border sitewide for now, but also may need to make each page on the site a diffent color. Thanks in advance for your support.

You mean make this current layout

https://playbook-nth.squarespace.com/

to your screen?

Hello Tuanphan-

That is correct, I would like to create a solid color border with an inset thin black rule - the image I attached was a quick mockup in photoshop to show what I am trying to achieve. 

Just wondering if anyone has a suggestion for this. If it involves too much html, i can live with the plain border I have now.

Don't remove any code in your current code. Use this CSS code for header

header#header div, header#header {
    border-top-left-radius: 30px !important;
    border-top-right-radius: 30px;
    border-top: unset !important;
}
header#header {
    top: 30px;
}

With Footer, use this CSS code

footer#footer-sections, footer#footer-sections div {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
body {
    background-color: #6789d3;
}

Thanks so much for the above. Some strange behaviour is occurring (see screen shots) so I am leaning towards leaving the border square.

The header is sticky, so you want to disable sticky header, or remove space between sticky header - top of screen?