Skip to main content

Overview

By default, task bars in the Gantt chart have slightly rounded corners. The squareTaskBorder configuration option removes the rounded corners (sets border-radius to 0px) on both the task bar itself and the progress fill bar inside it. diagram

Step 1: Enable Square Borders Globally

To apply square borders to all Gantt widgets across the project, navigate to Administration > Configuration Properties and add:
nextedy.gantt.config.squareTaskBorder=true
This sets the default for all Gantt instances. The default value is false (rounded corners).

Step 2: Enable for a Specific Widget

To enable square borders on a single Gantt widget, add the following to Widget Properties > Advanced > Gantt Config Script:
gantt.config.squareTaskBorder = true;
If square borders are enabled globally via Configuration Properties, you can override the setting for a specific widget by adding gantt.config.squareTaskBorder = false; to that widget’s Gantt Config Script.

What Changes

When squareTaskBorder is enabled, the following elements lose their rounded corners:
ElementRounded (default)Square
Task barborder-radius: 2pxborder-radius: 0px
Progress fill barborder-radius: 2pxborder-radius: 0px
The exact default border-radius value may vary by version. Enable the setting and visually confirm the change in your Gantt chart.

When to Use Square Borders

Square borders are particularly useful in the following scenarios:
  • Dense schedules: When many task bars are packed closely together, square corners reduce visual clutter and make row boundaries clearer.
  • Print and export: Square borders render more consistently when exporting the Gantt chart to PNG or printing to PDF, since rounded corners can appear slightly different across renderers.
  • Corporate style guides: Some organizations prefer a flat, angular visual style that aligns with their design standards. Square task borders provide a more traditional project management appearance.
  • Combining with other visual customizations: When you use custom progress coloring or item color scripts, square borders create a cleaner canvas that lets the color coding stand out without the distraction of rounded edges.
The squareTaskBorder setting applies specifically to standard task bars and their progress fill. Milestone items (diamond shapes) and project-type summary bars are not affected by this setting, as they use different rendering shapes.

Verification

You should now see task bars with sharp, square corners instead of the default rounded edges. Both the outer task bar and the inner progress fill bar should have straight corners. If you enabled the setting globally, check multiple Gantt pages to confirm consistent rendering.

See Also

Source Code
  • prod-gantt-src/com.nextedy.polarion.gantt.client/cypress/e2e/view/SquareBorders.cy.ts
  • prod-gantt-src/com.nextedy.polarion.gantt.client/src/js/config.js
  • prod-gantt-src/com.nextedy.polarion.gantt.client/cypress/e2e/gantt-Item-Progress.cy.ts
  • prod-gantt-src/com.nextedy.polarion.gantt.client/src/js/main.js
  • prod-gantt-src/com.nextedy.polarion.gantt.client/cypress/e2e/view/markTasksWithNoAllocation.cy.ts