> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Use Square Task Borders

> Switch task bar corners from rounded to square in the Nextedy GANTT chart for a more compact, traditional visual style.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

## 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.

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/Jklvz9qm2AdmIvBG/gantt/diagrams/guides/visualization/square-task-borders/diagram-1.svg?fit=max&auto=format&n=Jklvz9qm2AdmIvBG&q=85&s=130001bc6f7cfbd6ae338a066dd8c46f" alt="diagram" style={{ maxWidth: "480px", width: "100%" }} width="480" height="90" data-path="gantt/diagrams/guides/visualization/square-task-borders/diagram-1.svg" />
</Frame>

<Steps>
  <Step title="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>

  <Step title="Enable for a Specific Widget">
    To enable square borders on a single Gantt widget, add the following to **Widget Properties > Advanced > Gantt Config Script**:

    ```javascript theme={null}
    gantt.config.squareTaskBorder = true;
    ```

    <Tip title="Override Global Setting">
      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.
    </Tip>
  </Step>
</Steps>

## What Changes

When `squareTaskBorder` is enabled, the following elements lose their rounded corners:

| Element           | Rounded (default)    | Square               |
| ----------------- | -------------------- | -------------------- |
| Task bar          | `border-radius: 2px` | `border-radius: 0px` |
| Progress fill bar | `border-radius: 2px` | `border-radius: 0px` |

<Info title="Verify in application">
  The exact default border-radius value may vary by version. Enable the setting and visually confirm the change in your Gantt chart.
</Info>

## 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.

<Note title="Milestone and Project Bars">
  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.
</Note>

## 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

* [Configure Item Colors](/gantt/guides/visualization/configure-colors)
* [Customize Text Inside Task Bars](/gantt/guides/visualization/text-inside-bars)
* [Adjust Gantt Row Height](/gantt/guides/visualization/row-height)
* [Apply Custom CSS to the Gantt Widget](/gantt/guides/integration/custom-css-styling)

<LastReviewed date="2026-07-02" />