How to Change Round Rectangle Border for Image Node in Blazor Diagram?

The Syncfusion Blazor Diagram component allows extensive customization of node appearances. While the CornerRadius property is unavailable for image nodes, you can achieve a rounded rectangle border for an image node using HTML templates. This article demonstrates the implementation in a step-by-step manner.

Prerequisites:
Before proceeding, ensure you have a Blazor Server application set up. If you need assistance, you can follow the instructions here: Create Blazor Server application

Implementation Steps:

Step 1: Configure SfDiagramComponent
Add the SfDiagramComponent to your Blazor page and enable the HTML node type to use custom templates. Refer to the following UG documentation on how to define diagram component with template template

Step 2: Customize HTML Template
Use the DiagramTemplates and NodeTemplate to customize the image node with a rounded rectangle border. Below is the code snippet:

@page "/"
@using Syncfusion.Blazor.Diagram

<style>
   .custom-node {
       position: relative;
       width: 180px;
       height: 57px;
       border: 2px solid black; /* Border color */
       border-radius: 40px;     /* Border radius */
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .custom-node-image {
       background-image: url('/diagram/images/productmanager.png');
       background-size: cover;
       width: 50px;
       height: 50px;
       border-radius: 50%; /* Make image circular */
   }
</style>

<SfDiagramComponent Height="600px" Nodes="@nodes">
   <DiagramTemplates>
       <NodeTemplate>
           @{
               Node node = (context as Node);
           }
           <div class="custom-node">
               <div class="custom-node-image"></div>
           </div>
       </NodeTemplate>
   </DiagramTemplates>
</SfDiagramComponent>

Key Features in the Code
HTML Template for Node: The custom node is defined with a div styled for a rounded rectangle border and a circular image.

Style Properties:

• border: Sets the border color and width.
• border-radius: Rounds the corners.
• background-image: Displays the image inside the node.

Output:

You can download the complete working sample from here.

Conclusion:
We hope you enjoyed learning how to change round rectangle border for an image node in Blazor Diagram.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Diagram Example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac,, or feedback portal. We are always happy to assist you!