Border around browser window?



  • Hello, How can I make a border display around Vivaldi browser windows? (I am using Windows 10.) I don't want to activate "Use Native Window" under Window Appearance settings, but I am hoping there is a way to simply have a small border display around Vivaldi. Hopefully the screenshots will help to better understand what I would like to try to achieve. Thanks!

    MODEDIT: Fixed the syntax for attached images.



  • Thank you! I'll go check out that link.



  • @areacode514
    Any luck fixing this? I cant use Native mode as it stuffs up the MoveGrid functions on my splitscreen
    Same issue on W7



  • Despite I can't look at your images, I think it is just the feature I too would like to have.
    Just a black (or colored as the theme) line of 1 pixel width around Vivaldi-window.



  • I hate borderless window as well. You can enable border by editing Vivaldi\Application\1.10.845.3\resources\vivaldi\style\common.css

    At the end of file add:

    #browser {
    	border: 1px solid #999 !important;
    }
    

    This will make border. But you can't drag window from that border. I do not know what code to add to be dragable. But after every update of Vivaldi, you have to edit that file again.



  • With enabled "Native Window" native titlebar shows too. And it reduces useful height.
    I want to see only native border like in last Opera 45.



  • @enc0re to make it draggable, it may be because its not applied to the outermost element, so:

    body { border: 1px solid var(--colorAccentBg)}
    

    works for me.

    Post edited to allow for custom colour vars: you can use any of the colours set as variables by vivaldi.



  • @lonm

    This code:

        #browser.normal {
        padding: 0 2px 2px solid !important;
    }
    
    

    stopped working for me a few days ago, I switched to your code, it also is not working.

    Am I missing something?

    Regards
    raed

    Running Vivaldi 1.15.1111.3 on Win8.1.



  • @raed Here's the code which was introduced in one of the snapshots that does this (it got removed from final because reasons 🤔).

    I've modified it slightly to always show a border regardless of focus state and windows version, and have it follow the UI accent.

    If you don't like that colour, just change var(--whatever) to:

    • a different variable (var(--colorHighlightBg) was the default)
    • a colour name like violet
    • the #abc123 hex value of your choice.

    Note that

    • The first section is when the browser is focused and not maximised
    • The second section is when the browser is not focused and not maximised
    #browser.win.normal:not(.native):after {
      content: '';
      pointer-events: none;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 1px solid var(--colorAccentBg);
    }
    #browser.win.normal:not(.native).isblurred:after {
      border-color:var(--colorAccentFgFaded);
    }
    


  • @lonm
    Thank you, this also is not working for me, I have used a custom.css file containing only your code to make sure the problem is not caused by a conflict in my regular, cluttered custom.css, it still refused to play nice.

    I suspect the developers have changed something or the other in v1.15.1111.3 that my level of knowledge does not allow me to figure out.

    Regards
    raed



  • @raed What OS do you use?



  • @lonm

    I am running Vivaldi 1.15.1111.3 on an up to date Windows 8.1.

    Regards
    raed



  • @raed I can't imagine why it wouldn't be working - unless on windows 8 the browser has different classes set. (I'm using windows 10)



  • @lonm this works for me in win7 32bit, Vivaldi 1.15.1111.3


 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.