Barra de rolagem com ou sem bordas - entenda

Vamos aprender a como personalizar a barra de rolagem: Com ou sem borda, escolhendo o tipo de borda que quiser e a cor da barrinha, que no caso não é aquela redondinha na qual já postei um tutorial sobre ela (aperte aqui se quiser ver), mas sim aquela reta quadrada. O post é meio que comprido, então aperte em leia mais.

Se reblogar ou se usar no seu blog credite plixx, porque eu nunca vi nenhum blog com esse tutorial das bordas na barra u.u

1) Vá no seu HTML, aperte ctrl+f e procure por: ]]></b:skin>

2) Acima do código encontrado cole:

::-webkit-scrollbar {width: 12px; height: 4px; background: #FFEFD5; }
::-webkit-scrollbar-thumb { background: #DB7093; }

Não se esqueçam que colocamos muitos códigos antes dessa tag, e que por isso talvez não funcione. Recomendo você colar esse acima de todos os códigos que colamos acima de ]]></b:skin>

Em vermelho coloque a cor que você quer referente a barra fixa e em azul coloque a cor que você quer referente a barra que rola. Escolha as cores aqui.

width = largura

height = altura

Altere os números caso queira aumentar ou diminuir a altura e/ou a largura.

Se quiser colocar a borda na barra que rola, escolha uma borda (créditos dos códigos das bordas abaixo ao Cherry Bomb):

Border: 1px solid #000000; -> Propriedade: espessura em pixels estilo cor;

Lembrando que você não altera a palavra "border" ok?

Borda Solid
Código: Border: 1px solid #000000;

Borda Dotted
Código: Border: 2px dotted #000000;

Borda Dashed
Código: Border: 1px dashed #000000;

Borda Groove
Código: Border: 3px groove #aa3cff;

Borda Inset
Código: Border: 3px inset #aa3cff;

Borda Outset
Código: Border: 3px outset #aa3cff;

Borda Double
Código: Border: 3px double #000000;

Você também pode usar bordas diferentes e de cores diferentes em cada um dos lados do elemento, ou usar borda apenas em determinado lado do elemento. Veja os exemplos:

Border-top: 1px solid #000000; Border-left: 3px double #000000; border-bottom: 1px dashed #000000; border-right: 2px dotted #000000;

Depois de escolhida, logo depois de ::-webkit-scrollbar-thumb { background: #DB7093; cole o código da borda. (Ou seja, antes do segundo } )

Se quiser colocar a borda na barra fixa, colo o código da borda escolhida logo depois de ::-webkit-scrollbar {width: 12px; height: 4px; background: #FFEFD5; (Ou seja, antes do primeiro })

Visualize, se estiver tudo certinho salve e pronto.

É isso, você pode personalizar do jeito que quiser! Não se esqueça dos créditos ^^ beijinhos.