Window Decorations and Borders

An introduction to managing SDL2 window decorations, borders, and client areas.

Ryan McCombe
Updated

As we likely noticed, platforms typically add additional decorations to our windows, such as a title bar. These decorations include things like title bars and borders. But what if you need a clean, borderless look?

In this lesson, we'll cover everything you need to know about customizing SDL2 window styles, from removing decorations to dynamically adding them back.

The following screenshot is from Windows 11. It shows a decorated window on the left and an equivalent window without those decorations on the right:

SDL refers to these decorations as borders but, as we can see above, they can also include things like the title bar on desktop platforms.

By default, SDL asks the platform to include these decorations for our window. We can opt to exclude them by passing the SDL_WINDOW_BORDERLESS window flag:

SDL_Window* Window{SDL_CreateWindow(
  "Window", 100, 200, 300, 200,
  SDL_WINDOW_BORDERLESS
)};

Adding and Removing Borders Using SDL_SetWindowBordered()

We can add or remove decorations from an existing window using the SDL_SetWindowBordered() function. We pass the SDL_Window pointer as the first argument, and SDL_TRUE or SDL_FALSE as the second argument:

SDL_Window* Window{SDL_CreateWindow(
  "Window", 100, 200, 300, 200, 0
)};

// Adding Borders
SDL_SetWindowBordered(Window, SDL_TRUE);

// Removing Borders
SDL_SetWindowBordered(Window, SDL_FALSE);

We can check if a window currently has borders using SDL_GetWindowFlags() and testing if the SDL_WINDOW_BORDERLESS flag is set:

SDL_Window* Window{SDL_CreateWindow(
  "Window", 100, 200, 300, 200,
   SDL_WINDOW_BORDERLESS
)};

if (SDL_GetWindowFlags(Window) &
  SDL_WINDOW_BORDERLESS) {
  std::cout << "Window is borderless\n";
}

SDL_SetWindowBordered(Window, SDL_TRUE);

if (!(SDL_GetWindowFlags(Window) &
  SDL_WINDOW_BORDERLESS)) {
  std::cout << "Not any more!";
}
Window is borderless
Not any more!

Client Area and Border Size

When setting the position or size of a window in SDL, we are defining the dimensions of the client area. The client area refers to the region of the window where the application's content is displayed, excluding any decorations like the title bar or window borders.

Decorations are added outside the client area. For instance, if you specify a window height of 200, the client area will be exactly 200 pixels tall, but the total window height will also include the additional pixels occupied by decorations such as the title bar and borders.

To precisely control the overall window size or position, it's important to account for the size of these decorations.

The SDL_GetWindowBordersSize() function can help us here. We pass the SDL_Window pointer, and 4 integer pointers. The integers will be updated with the size of the decorations on the top, left, bottom, and right of our window respectively:

SDL_Window* Window{SDL_CreateWindow(
  "Window", 100, 200, 300, 200, 0
)};

int Top, Left, Bottom, Right;
SDL_GetWindowBordersSize(
  Window, &Top, &Left, &Bottom, &Right);

std::cout << "Top: " << Top
  << ", Left: " << Left
  << ", Bottom: " << Bottom
  << ", Right: " << Right;
Top: 31, Left: 8, Bottom: 8, Right: 8

We can pass a nullptr for any of these arguments to ignore the decoration size on that side. For example, passing nullptr for the left and right pointers will only return the sizes of the top and bottom decorations.

// We only care about the top and bottom decoration size
int Top, Bottom;
SDL_GetWindowBordersSize(
  Window, &Top, nullptr, &Bottom, nullptr);

This function returns 0 if successful, or a negative error code otherwise. We can call SDL_GetError() for an explanation of the error:

int Top;
int ExitCode{SDL_GetWindowBordersSize(
  nullptr, &Top, nullptr, nullptr, nullptr)};  

if (ExitCode < 0) {
  std::cout << "Error getting border size: "
    << SDL_GetError();
}
Error getting border size: Invalid window

Summary

In this lesson, we introduced window decorations, and how to control them through SDL2. This included making windows borderless and measuring their decorations for precise layout control.

Key Takeaways

  • SDL provides the SDL_WINDOW_BORDERLESS flag to create borderless windows.
  • Use SDL_SetWindowBordered() to dynamically toggle decorations.
  • The SDL_GetWindowBordersSize() function helps calculate the size of window decorations.
Next Lesson
Lesson 54 of 129

Window Titles

Learn how to set, get, and update window titles dynamically

Questions & Answers

Answers are generated by AI models and may not have been reviewed. Be mindful when running any code on your device.

Why use a borderless window?
Why would you want a borderless window in an application?
Can SDL customize border colors?
Can I change the color of the border or title bar in SDL2?
Borderless and SDL_GetWindowBordersSize()
How does SDL_GetWindowBordersSize() behave on borderless windows?
Uses of window decoration sizes
What are some practical uses for knowing the size of window decorations?
Resizable borderless windows in SDL2
Can I create a borderless window that still has a resizable frame?
Decorations in fullscreen modes
How do window decorations affect fullscreen modes?
Can I remove only the title bar?
Can I remove only the title bar but keep the borders?
Customizing window decorations
How can I customize window decorations in SDL2?
Or Ask your Own Question
Purchase the course to ask your own questions