flutter_html_css_border_radius_extension 0.1.0

A flutter_html extension to support CSS border-radius property.

flutter_html_css_border_radius_extension

A flutter_html extension that adds real support for the CSS border-radius (and related logical/physical corner) properties, which flutter_html does not clip or round for by default.

Features

• Reads border-radius, the four physical corner properties (border-top-left-radius, etc.), and the logical corner properties (border-start-start-radius, etc., treated as LTR) from an element's inline style="" attribute.
• Supports the CSS shorthand syntax, including the horizontal / vertical elliptical form (e.g. border-radius: 8px 8px 0 0 / 4px 4px 0 0).
• Wraps matching elements in a clipped, rounded container and re-applies any border/border-width/border-color so the border isn't clipped away, and moves margin* outside the clip so spacing still renders correctly.
• A no-op for elements that don't end up with any border-radius* in their final inline style.

Getting started

Add the package alongside flutter_html:

dependencies:
  flutter_html: ^3.0.0
  flutter_html_css_border_radius_extension: ^0.1.0

Usage

Html(
  data: '''
    <div style="border-radius: 12px; border: 2px solid #0d6efd; padding: 8px;">
      Rounded box
    </div>
  ''',
  extensions: const [CssBorderRadiusHtmlExtension()],
);

If you generate inline styles from utility classes (e.g. via flutter_html_bootstrap_css_utilities_extension or flutter_html_vuetify_extension), list this extension after those so it sees the final style="" value.

Additional information

This package reads the inline style string produced earlier in the pipeline; it does not parse <style> blocks or stylesheets. File issues and contributions on the package's GitLab repository.