Better CSD borders.

[CamilleScholtz]

Hi, I found a less hack-ish way to display round corners in the new 3.10 apps. Instead of using a 2px border and 2px outline I just use a 4px outline and fix the rounded corners with box-shadows. This fixed the need to ad an outline the the CSD title bar and it fixes weird padding issues. before:

.window-frame {
    border-color: @theme_base_color;
    border-width: 4px;
    border-style: solid;                  
    border-radius: 0; /* this radius affects the part inside the outline making it 0 removes some black around toolbars   */
    outline: 2px solid @theme_base_color; /* corners' radius is = to the width of the outline */
    background: @theme_base_color; /* needed to remove the black around the toolbars   */

    /* Keeping the CSS box shadows for consistency with Mutter's shadows for now */
    box-shadow: 0 2px 8px 3px @wm_shadow,

    /* this is used for the resize cursor area */
    margin: 10px;
}

after:

.window-frame {
    border-color: @theme_base_color;
    border-width: 4px;
    border-style: solid;                  
    border-radius: 0; /* this radius affects the part inside the outline making it 0 removes some black around toolbars   */
    outline: 4px solid @theme_base_color; /* corners' radius is = to the width of the outline */
    background: @theme_base_color; /* needed to remove the black around the toolbars   */

    /* Keeping the CSS box shadows for consistency with Mutter's shadows for now */
    box-shadow: 0 2px 8px 3px @wm_shadow,
        8px 8px 0px 0px rgba(255, 255, 255, 0.5),
        -8px 8px 0px 0px rgba(255, 255, 255, 0.5),
        -8px -8px 0px 0px rgba(255, 255, 255, 0.5),
        8px -8px 0px 0px rgba(255, 255, 255, 0.5);

    /* this is used for the resize cursor area */
    margin: 10px;
}

before scrot:

after scrot:

Notice, how it fixed the gnome-maps titlebar border and the nautilus and tweak-tool scrollbar padding/