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.


  • Moderator

    @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.


  • Moderator

    @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


  • Moderator

    @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


  • Moderator

    @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



  • This post is a bit old, but hopefully this helps someone. Add the following CSS to the beginning of your common.css file (located at Vivaldi\Application[version]\resources\vivaldi\style\common.css):

    #browser.win:not(.fullscreen){
      border: 1px solid var(--colorAccentBg);
    }
    

    This tells Vivaldi to apply a 1 pixel border based on your current accent color whenever the window is not fullscreen (i.e. maximized).


Log in to reply
 

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