BUG: Can't remove border of element

Hi @kuhelbeher with the new https://github.com/artf/grapesjs/releases/tag/v0.18.1 release this can be handled.

The main issue here is how the built-in border property is configured, which is a Composite type of border-width, border-style and border-color. That means the editor is able to understand styles like border: 5px solid red or even border-color: red; border-style: solid; border-width: 5px; but unfortunately, properties like border-top, border-bottom, etc. are out of the scope as they're seen as totally different ones.

The good news, with the new release you're able to manage built-in properties and update their behavior with props like toStyle/fromStyle (available for composite and stack types). So here is an example of how would you force to remove alternative border properties on change.

const extendBorder = (editor) => {
  editor.StyleManager.addBuiltIn('border', {
    toStyle(values, { property }) {
      const propWidth = property.getProperty('border-width');
      const width = `${propWidth.getValue()}${propWidth.getUnit()}`;
      const style = property.getProperty('border-style').getValue();
      const color = property.getProperty('border-color').getValue();
      return {
        'border': `${width} ${style} ${color}`,
        'border-top': '',
        'border-right': '',
        'border-bottom': '',
        'border-left': '',
      }
    }
  });
}
grapesjs.init({
  // ...
  plugins: [extendBorder]
})

The alternative solution would be to set up a new UI type for managing the border property in a more advanced way but that for sure requires more effort.