VOOZH about

URL: https://www.geeksforgeeks.org/css/css-break-inside-property/

⇱ CSS break-inside property - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

CSS break-inside property

Last Updated : 15 Jul, 2025

The break-inside property in CSS is used to prevent unwanted breaks in multi-region contexts, such as multi-column layouts or paged media. It controls how region, column, or page breaks behave inside a box.

If no box is generated, the property is ignored. By using break-inside, you can avoid awkward content breaks and create a smoother layout.

Default Value: auto

Syntax

break-inside: Keywor_values;
/* Or */
break-inside: Global_values;

Property values

This property accepts the values mentioned above and described below:

Property ValuesDescription
Keyword ValuesRefers to values like auto, avoid, avoid-page, avoid-column, and avoid-region, which control how breaks are handled in multi-region layouts.
Global ValuesRefers to values such as initial, inherit, and unset, which apply global settings to the property.

Example of CSS break-inside property

Below is the example that illustrates the use of break-inside property

Output:

👁 Image

Supported Browsers

  • Chrome
  • Firefox (partially supported)
  • Opera
  • Safari (partially supported)
  • Edge
  • Internet Explorer (not supported)

Note: The break-insideproperty is supported in most modern browsers, though partial support in Firefox and Safari means it may not work fully as expected in some cases. It is not supported in Internet Explorer.

Comment