flutter_html_css_border_radius_extension 0.1.0

A flutter_html extension to support CSS border-radius property.

example/example.md

Example

flutter_html has no border-radius support of its own. It does not parse the property at all, so rounded corners in your HTML simply render square. This extension adds it.

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_css_border_radius_extension/flutter_html_css_border_radius_extension.dart';

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <div style="border-radius: 12px; background-color: #0d6efd;
                          color: #ffffff; padding: 12px; margin: 8px;">
                A rounded, padded box.
              </div>

              <div style="border-radius: 16px; border: 2px solid #dc3545;
                          padding: 12px; margin: 8px;">
                The border is preserved and follows the corners.
              </div>

              <div style="border-top-left-radius: 24px;
                          border-bottom-right-radius: 24px;
                          background-color: #198754; padding: 12px; margin: 8px;">
                Individual corners work too.
              </div>
            ''',
            extensions: const [CssBorderRadiusHtmlExtension()],
          ),
        ),
      );
}

void main() => runApp(const ExampleApp());

What it supports

• The border-radius shorthand, including the elliptical horizontal / vertical form (border-radius: 8px 8px 0 0 / 4px 4px 0 0).
• All four physical corners (border-top-left-radius, and so on).
• The logical corner properties (border-start-start-radius, and so on), treated as left-to-right.
• % values, mapped to a large radius so border-radius: 50% gives you the usual pill/circle result.

Behaviour worth knowing

• Any border, border-width or border-color on the same element is re-applied around the clip, so the border is not clipped away.
• Any margin is moved outside the clipped box, so spacing still renders the way CSS means it to.
• Elements whose final inline style contains no border-radius* are untouched; the extension is a no-op for them.
• It reads the inline style="" attribute only. It does not parse <style> blocks or stylesheets.

Pairing with a utility-class extension

If your rounded corners come from utility classes rather than inline styles, put this extension after the one that expands those classes, so it sees the final style:

Html(
  data: '<div class="rounded-3 text-bg-primary">Card</div>',
  extensions: const [
    BootstrapUtilitiesHtmlExtension(), // turns `rounded-3` into border-radius
    CssBorderRadiusHtmlExtension(),    // renders it
  ],
);

Those packages detect this one at runtime and stop suppressing border-radius once it is registered.

Non-standard tags

Pass extraTags to apply the extension to elements beyond the usual div/span set:

const CssBorderRadiusHtmlExtension(extraTags: {'v-card', 'my-widget'})