diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 660241f20b1..ec1d6854850 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3273,8 +3273,35 @@ const SnippetOptionWidget = Widget.extend({
         hasUserValue = applyCSS.call(this, cssProps[0], values.join(' '), styles) || hasUserValue;
 
         function applyCSS(cssProp, cssValue, styles) {
+            // This condition requires extraClass to NOT be set.
             if (!weUtils.areCssValuesEqual(styles[cssProp], cssValue, cssProp, this.$target[0])) {
-                this.$target[0].style.setProperty(cssProp, cssValue, 'important');
+                // Property must be set => extraClass will be enabled.
+                if (params.extraClass) {
+                    // The extraClass is temporarily removed during selectStyle
+                    // because it is enabled only if the element style is set
+                    // by the option. (E.g. add the bootstrap border class only
+                    // if there is a border width.) Unfortunately the
+                    // extraClass might specify default !important properties,
+                    // therefore determining whether !important is needed
+                    // requires the class to be applied.
+                    this.$target[0].classList.add(params.extraClass);
+                    // Set inline style only if different from value defined
+                    // with extraClass.
+                    if (!weUtils.areCssValuesEqual(styles[cssProp], cssValue, cssProp, this.$target[0])) {
+                        this.$target[0].style.setProperty(cssProp, cssValue);
+                    }
+                } else {
+                    // Inline style required.
+                    this.$target[0].style.setProperty(cssProp, cssValue);
+                }
+                // If change had no effect then make it important.
+                // This condition requires extraClass to be set.
+                if (!weUtils.areCssValuesEqual(styles[cssProp], cssValue, cssProp, this.$target[0])) {
+                    this.$target[0].style.setProperty(cssProp, cssValue, 'important');
+                }
+                if (params.extraClass) {
+                    this.$target[0].classList.remove(params.extraClass);
+                }
                 return true;
             }
             return false;