Last Updated : 31 Mar, 2022

The radius attribute is the radius for the operation on <feMorphology> filter primitive. If two numbers are given then the first number is the x-radius and the second number is the y-radius. If only one number is given, then it is used for both the x and y-axis.

Note: A zero or negative value disables the effect of the <feMorphology> filter primitive.

Syntax:

```radius = number-optional-number
```

Attribute Values: The radius attribute accepts the values mentioned above and described below:

• number-optional-number: It is a pair of numbers, where the second number is optional. Its default value is 0.

The below examples illustrate the use of the radius attribute.

Example 1:

## HTML

 ` ` `<``html``> ` ` `  `<``head``> ` `    ``<``style``> ` `        ``text { ` `            ``font-family: Arial; ` `            ``font-size: 2.5em; ` `        ``} ` `    `` ` ` ` ` `  `<``body``> ` `    ``<``div` `style``=``"color: green;"``> ` `        ``<``h1``> ` `            ``GeeksforGeeks ` `        `` ` ` `  `        ``<``svg` `xmlns``=``"http://www.w3.org/2000/svg"``> ` ` `  `            ``<``filter` `id``=``"Geek1"``> ` `                ``<``feMorphology` `operator``=``"erode"`  `                    ``radius``=``".5"` `/> ` `            `` ` `            ``<``text` `style``=``"filter: url(#Geek1);"`  `                ``y``=``"1em"``>Thin Geeky Text ` `        `` ` `    `` ` ` ` ` `  ` `

Output:

Example 2:

## HTML

 ` ` `<``html``> ` ` `  `<``head``> ` `    ``<``style``> ` `        ``text { ` `            ``font-family: Arial; ` `            ``font-size: 2em; ` `        ``} ` `    `` ` ` ` ` `  `<``body``> ` `    ``<``div` `style``=``"color: green;"``> ` `        ``<``h1``> ` `            ``GeeksforGeeks ` `        `` ` ` `  `        ``<``svg` `xmlns``=``"http://www.w3.org/2000/svg"``> ` ` `  `            ``<``filter` `id``=``"Geek1"``> ` `                ``<``feMorphology` `operator``=``"dilate"` `                        ``radius``=``"2"` `/> ` `            `` ` `            ``<``text` `style``=``"filter: url(#Geek1);"`  `                ``y``=``"1em"``>Thick Geeky Text ` `        `` ` `    `` ` ` ` ` `  ` `

Output:

Previous
Next