Collapse borders in a layout

A common layout for applications is to split up the screen into panes, with borders around each pane. Often this leads to making UIs that look disconnected. E.g., the following layout:

Created by the following code:

{{#include @code/recipes/how-to-collapse-borders/src/bin/problem.rs:draw}}

We can do better though, by collapsing borders. E.g.:

Starting with Ratatui 0.30, collapsing borders has become much easier thanks to the new merge_borders method and Spacing::Overlap. The recipe is simple:

1. Import Spacing and MergeStrategy.

   rustCopy

   {{#include @code/recipes/how-to-collapse-borders/src/bin/solution.rs:imports}}
   

2. Use Spacing::Overlap(1) in your layout to make borders overlap.

   rustCopy

   {{#include @code/recipes/how-to-collapse-borders/src/bin/solution.rs:layout}}
   

3. Add .merge_borders(MergeStrategy::Exact) to your blocks to automatically merge borders (see MergeStrategy documentation for details about the different strategies).

   rustCopy

   {{#include @code/recipes/how-to-collapse-borders/src/bin/solution.rs:blocks}}
   

Setting merge_borders to MergeStrategy::Exact or MergeStrategy::Fuzzy automatically handles all the complex border joining logic. The Spacing::Overlap(1) ensures that adjacent borders occupy the same space, allowing them to be merged.

:::tip

This new approach in Ratatui 0.30 replaces the complex manual border management that was required in earlier versions. If you're using an older version of Ratatui, you'll need to use custom border sets and selective border rendering as described in the previous version of this recipe.

:::

The full code for this example is available at https://github.com/ratatui/ratatui-website/blob/main/code/recipes/how-to-collapse-borders

{{#include @code/recipes/how-to-collapse-borders/src/bin/solution.rs}}