Is there a way to sharpen corners?

[superdragon1772]

I am specifically interested in less rounded tabs. Or in general, if there is a universal setting please let me know!

[SleepyScribe]

If you want to globally set the roundness of the url bar and tabs, the variable you're looking for is --firefoxcss-border-radius in the userChrome.css file under Global Variables. Here's an example with the line commented out for completely sharp corners.

If you want just a less rounded look, mess with the value and lessen it. Default is 10px, so try 6px or so.

If you want just the tabs to be less rounded, find the tabs sections somewhere beyond line 600 in userChrome.css and either comment them or remove the --firefoxcss-border-radius from them and change them to how you like (i.e. 6px). You will need to change them all specifically for each tab type, but there should only be four. Here's what it would look like completely commented out:

/* Normal tabs design */
.tabbrowser-tab .tab-background:not([selected]) {
    border: 0;
    /* border-radius: var(--firefoxcss-border-radius) !important; */
    background-image: none !important;
    background-color: var(--firefoxcss-tab-bg-color) !important;
    transition: background-color 250ms ease !important;
    box-shadow: var(--firefoxcss-normal-tabs-box-shadow);
}

/* Normal tabs design on hover */
#tabbrowser-tabs
    .tabbrowser-tab:hover
    > .tab-stack
    > .tab-background:not([selected]) {
    border: 0;
    /* border-radius: var(--firefoxcss-border-radius) !important; */
    background-image: none !important;
    background-color: var(--firefoxcss-tab-hover-bg-color) !important;
    box-shadow: var(--firefoxcss-normal-tabs-box-shadow);
}

/* Selected tabs design */
#tabbrowser-tabs .tabbrowser-tab .tab-background[selected] {
    border: 0;
    /* border-radius: var(--firefoxcss-border-radius) !important; */
    background-image: none !important;
    background-color: var(--firefoxcss-tab-active-bg-color) !important;
    box-shadow: none;
    outline: none !important;
}

/* Multiselect tabs */
#tabbrowser-tabs .tabbrowser-tab .tab-background[multiselected] {
    border: 0;
    /* border-radius: var(--firefoxcss-border-radius) !important; */
    background-image: none !important;
    outline: none !important;
    background-color: var(--firefoxcss-tab-active-bg-color) !important;
    box-shadow: none;
}

Remember, you're looking for the border-radius. Mess with either the tabs or the global variable and see what you like.

[superdragon1772]

Thanks a ton!