Edge like curved frame around website

oudstand

Inspired by the curved frame around the website as in the latest Microsft Edge Dev, I wrote some CSS to achieve this in Vivaldi.

Code:

/** 
* Edge like border radius
* Forum link: https://forum.vivaldi.net/topic/83618/edge-like-curved-frame-around-website
*/

#browser {
    --edge-like-border-radius: var(--radius); /* 0.5rem */

    &.fullscreen {
        #main, .inner {
            padding-top: 0;
        }
    }

    &:not(.fullscreen) {
        &:has(#panels-container.left.icons) #webpage-stack {
            margin-left: 0;
        }
        &:has(#panels-container.left > .SlideBar) #webpage-stack {
            margin-left: 3px;
        }
        &:has(#panels-container.right.icons) #webpage-stack {
            margin-right: 0;
        }
        &:has(#panels-container.right > .SlideBar) #webpage-stack {
            margin-right: 3px;
        }

        #webpage-stack {
            box-shadow: 0 0 0 var(--edge-like-border-radius) var(--colorAccentBg);

            margin-left: calc(var(--edge-like-border-radius) / 2);
            margin-bottom: calc(var(--edge-like-border-radius) / 2);
            margin-right: calc(var(--edge-like-border-radius) / 2);

            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: var(--edge-like-border-radius);
                /* border-top-left-radius: var(--edge-like-border-radius);
                border-bottom-left-radius: var(--edge-like-border-radius);
                border-top-right-radius: var(--edge-like-border-radius);
                border-bottom-right-radius: var(--edge-like-border-radius); */
                outline: var(--edge-like-border-radius) solid var(--colorAccentBg);
                z-index: 4;
                pointer-events: none;
            }
        }

        #switch {
            margin-bottom: calc(var(--edge-like-border-radius) / 2);
        }

        #panels-container {
            border-color: var(--colorAccentBg) !important;

            &:not(.icons):not(.overlay) .panel-group {
                margin-right: calc(var(--edge-like-border-radius) / 4);
                padding-right: calc(var(--edge-like-border-radius) / 4);
                border-right: none;

                .panel-collapse-guard {
                    border-radius: var(--edge-like-border-radius);
                }
            }

            > button.SlideBar {
                background: var(--colorAccentBg);
            }
        }

        .panel-group {
            transition: border-right 0.5s ease, width var(--duration) ease-out !important;
            margin-bottom: calc(var(--edge-like-border-radius) / 2);

            &::before {
                content: '';
                position: fixed;
                width: 100%;
                height: 100%;
                border-top-left-radius: var(--edge-like-border-radius);
                border-bottom-left-radius: var(--edge-like-border-radius);
                outline: var(--edge-like-border-radius) solid var(--colorAccentBg);
                z-index: 1;
                pointer-events: none;
            }
        }

        .StatusInfo {
            margin-bottom: calc(var(--edge-like-border-radius) / 2);
            margin-left: calc(var(--edge-like-border-radius) / 2);
        }
    }
}

.fullscreen-listener-enabled #browser:not(.fullscreen) {
    #webpage-stack {
        margin: calc(var(--edge-like-border-radius) / 2) !important;
    }

    #switch {
        margin-top: calc(var(--edge-like-border-radius) / 2);
    }
}

Result:

You could also set the border only for some corners and without the black bar at the bottom. Therefore you can specify the border radius of each corner at #webpage-stack::before like this:
Code:

#webpage-stack::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;   
    /* border-radius: var(--edge-like-border-radius); */
    border-top-left-radius: var(--edge-like-border-radius);
    /* border-bottom-left-radius: var(--edge-like-border-radius); */
    border-top-right-radius: var(--edge-like-border-radius);
    /* border-bottom-right-radius: var(--edge-like-border-radius); */
    outline: var(--edge-like-border-radius) solid var(--colorAccentBg);
    z-index: 1;
    pointer-events: none;
}

and remove margin-bottom and margin-right from #webpage-stack.
Result:

If you're not using the code with margin-bottom you could also remove this code:

.StatusInfo {
    margin-bottom: calc(var(--edge-like-border-radius) / 2);
    margin-left: calc(var(--edge-like-border-radius) / 2);
}

.panel-group {
    margin-bottom: calc(var(--edge-like-border-radius) / 2);
}

For the web panels the rounded corners are displayed like this:
Result:

Result floating panel:

EDIT 1: Rewrote most of the code to achieve a better overall experience.
EDIT 2: set the correct margin at the bottom of the web panels switch to fit with the web page
EDIT 3: bug fixes & works now with AutoHide Tab Bar + Address Bar | Show on Hover
EDIT 4: bug fix
EDIT 5: now works on internal pages

allanmohr

This post is deleted!

allanmohr

This post is deleted!

allanmohr

Ok, I guess this won't work.
I'm using tabs at bottom and my existing CSS is hiding the side panel.
Thanks, though - I really prefer this aesthetic but I guess I'm kind of out of luck!

allanmohr

Ok, I'm good. Got a great result with:

#webpage-stack {
    /* change color (last parameter) to your preferred color */
    box-shadow: 0 0 0 0.75rem var(--colorAccentBg); 

    border-radius: 0.25rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
}

DoctorG

But i guess you should add a padding as rounded corners will cut content of a page.

oudstand

@DoctorG that's true. Until now I didn't noticed problems on websites but it could happen.

joaomascarenhas

I still haven't been able to make it work...

Pesala

With today’s high resolution widescreen monitors, just tile two tabs, then you will get round corners.

alt text

oudstand

@joaomascarenhas Where are you stuck or what's not working?

oudstand

@Pesala Yes that's true, but on the one side of the monitor is my browser and on the other half my IDE

rexxDZN

i have this weird artifact on the left, it doesn't matter if it is the tab stack or just one normal tab. @oudstand

oudstand

@rexxDZN If I use the tabs on the left, it still works correctly. What exactly disturbs you?

rexxDZN

@oudstand there is a greyish red block obstructing the theme and is at the middle of the tabs.

rexxDZN

@oudstand it even blocks the plus or other icons...

oudstand

@rexxDZN Try to add this code. Then it should look better. Let me know if it fixes your problem.

.tabs-left .tabbar-wrapper {
    padding-right: 0.25rem;
    z-index: 1;
}

rexxDZN

that unfortunatly broke everything...

oudstand

@rexxDZN interesting this doesn't happen if I try the provided code:

Did you use the code like this? Or do you use other mods as well that could break it?

#browser:not(.fullscreen) #webpage-stack {
    box-shadow: 0 0 0 1rem var(--colorBorder);

    /* border-top-left-radius: 0.75rem; */
    /* border-top-right-radius: 0.75rem; */
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;

    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
}

.tabs-left .tabbar-wrapper {
    padding-right: 0.25rem;
    z-index: 1;
}

#browser:not(.fullscreen) #webpage-stack::before {
    content: '';
    position: absolute;
    width: .75rem;
    height: .75rem;
    background-color: var(--colorBorder);
    -webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 70%, #000 73%);
    transform: rotate(180deg);
    z-index: 1;
}

#browser:not(.fullscreen) #webpage-stack::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: .75rem;
    height: .75rem;
    background-color: var(--colorBorder);
    -webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 70%, #000 73%);
    transform: rotate(-90deg);
    z-index: 1;
    top: 0;
    right: 0;
}

.StatusInfo {
    margin-bottom: 0.5rem;
}

.panel-group {
    margin-bottom: .5rem;
}

.panel-group::before {
    content: '';
    position: absolute;
    width: .75rem;
    height: .75rem;
    background-color: var(--colorBorder);
    -webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 70%, #000 73%);
    transform: rotate(180deg);
}

.panel-group::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: .75rem;
    height: .75rem;
    background-color: var(--colorBorder);
    -webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 70%, #000 73%);
    transform: rotate(90deg);
}

.webpanel-content {
    border-top-left-radius: .75rem;
}

rexxDZN

@oudstand yes i am using https://forum.vivaldi.net/topic/82900/collapsing-vertical-tabs-that-expand-on-hover-with-and-without-floating-tabs?page=1 the newer version in half of the first page. However I have found a better css that does the same thing working with it. Thank you for your help

oudstand

@rexxDZN Then this might be the problem ^^ Good that you found a solution