Añadir Scrollbar con CSS a elemento o descripción que supera el largo

¿Cómo cambiar el diseño de la barra de Scroll del navegador.?

El siguiente código CSS para crear una barra de Scroll en cualquier elemento se puede usar tanto para Webs en Prestashop, WordPress, Joomla, web a Código HTML, PHP o cualquier otro.

Válido para navegadores más usados como Firefox, Google Chrome (aunque suele funcionar en varios navegadores).
Simplemente se debe añadir el siguiente código CSS al elemento que se quiera visualizar con una barra de Scroll.

/* INICIO Descripcion Scrollbar */
/************************/
.pro_desc_short {
    margin: 2rem auto;
    border: 1px solid #aaa;
    height: 170px;
    width:90%;
    max-width: 400px;
    background: #f1f2f3;
    overflow:auto;
    box-sizing: border-box;
    padding:0 1rem;
	/*Estilos estándar experimentales (Firefox) */
    scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0);
    scrollbar-width: thin;
}

/* Estilos para motores Webkit y blink (Chrome, Safari, Opera... )*/

.pro_desc_short::-webkit-scrollbar {
    -webkit-appearance: none;
}

.pro_desc_short::-webkit-scrollbar:vertical {
    width:10px;
}

.pro_desc_short::-webkit-scrollbar-button:increment,.contenedor::-webkit-scrollbar-button {
    display: none;
} 

.pro_desc_short::-webkit-scrollbar:horizontal {
    height: 10px;
}

.pro_desc_short::-webkit-scrollbar-thumb {
    background-color: #797979;
    border-radius: 20px;
    border: 2px solid #f1f2f3;
}

.pro_desc_short::-webkit-scrollbar-track {
    border-radius: 10px;  
}

/* FIN Descripcion Scrollbar */
/************************/