Welcome! » Log In » Create A New Profile

add new css property

Posted by medic_911 
add new css property
January 23, 2012 05:29AM

Hi! How i can add new CSS allowed property like "border-radius"? If add this to CSS.AllowedProperties, i have error "Style attribute "border-radius" is not supported (for information on implementing this, see the support forums). Thanks.

Re: add new css property
January 23, 2012 08:48AM

Adding new CSS properties is a bit less documented than adding HTML properties, but there are two components:

1. You need to find an appropriate AttrDef for "border-radius" (I imagine this would be some length like property? Check the spec.) 2. You need to add it to CSSDefinition. You can do this by running getDefinition('CSS') from your copy HTMLPurifier_Config, and adding the entry border-radius to your AttrDef in the info parameter. See CSSDefinition.php for more details.

Oliver Schonrock
Re: add new css property
April 25, 2012 07:49AM

Thanks for this post. It helped my do exactly what the OP asked for. Here is a concrete code example which could save others time:

      $config = HTMLPurifier_Config::createDefault();

      // add some custom CSS3 properties                                                                                                                                              
      $css_definition = $config->getDefinition('CSS');

      $border_radius =
        $info['border-top-left-radius'] =
        $info['border-top-right-radius'] =
        $info['border-bottom-left-radius'] =
        $info['border-bottom-right-radius'] =
        new HTMLPurifier_AttrDef_CSS_Composite(array(
                                                 new HTMLPurifier_AttrDef_CSS_Length('0'),
                                                 new HTMLPurifier_AttrDef_CSS_Percentage(true)

      $info['border-radius'] = new HTMLPurifier_AttrDef_CSS_Multiple($border_radius);

      // wrap all new attr-defs with decorator that handles !important                                                                                                                
      $allow_important = $config->get('CSS.AllowImportant');
      foreach ($info as $k => $v) {
        $css_definition->info[$k] = new HTMLPurifier_AttrDef_CSS_ImportantDecorator($v, $allow_important);

      $html_purifier = new HTMLPurifier($config);
Re: add new css property
March 23, 2016 08:32AM

Hello. I want allow linear-gradient for background-image and background. Is this with your code possible?

Source: https://developer.mozilla.org/de/docs/Web/CSS/linear-gradient

Edited 1 time(s). Last edit at 03/23/2016 08:32AM by KillerBee.

Re: add new css property
March 24, 2016 03:37AM

In principle it's possible but it is a bit more nontrivial than most, because linear-gradient has a custom format so you'll have to write an AttrDef which knows how to parse it.

Your Email:


HTML input is enabled. Make sure you escape all HTML and angled brackets with < and >.

Auto-paragraphing is enabled. Double newlines will be converted to paragraphs; for single newlines, use the pre tag.

Allowed tags: a, abbr, acronym, b, blockquote, caption, cite, code, dd, del, dfn, div, dl, dt, em, i, ins, kbd, li, ol, p, pre, s, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var.

For inputting literal code such as HTML and PHP for display, use CDATA tags to auto-escape your angled brackets, and pre to preserve newlines:

Place code here

Power users, you can hide this notice with:

.htmlpurifier-help {display:none;}