Actualmente tengo óvalos de color gris claro alrededor de los artículos enumerados, 'superventas', 'reabastecido', 'vender rápido', etc. en mi página, pero quiero tener otro formato que esté condicionado a la cadena de texto que se está utilizando. por ejemplo, quiero un círculo negro alrededor de un artículo que incluyo como 'pedido por adelantado' en lugar de un círculo gris claro
<body> <div style="text-align: center"> <p style=" border: 1px solid rgba(203, 203, 203, 1); border-radius: 300px; padding: 3px; width: 95px; background-color: rgba(255, 255, 255, 1); font-size: 10px; font-weight: 800; color: rgba(100, 100, 100, 1); " > {% if product.tags contains "new-badge" %} NEW PRODUCT {% elsif product.tags contains 'restocked' %} RESTOCKED {% elsif product.tags contains 'best-seller' %} BEST SELLER {% elsif product.tags contains 'selling-fast' %} SELLING FAST {% endif %} </p> </div> </body>