Guidance for Rounded Display Bezels
Overview
As part of Windows 11’s unique new design language, rounded corners play an integral role in the look and feel of the UI. The overall perception of rounding in the system is shaped by both software rounding, controlled by the OS, and hardware rounding, controlled by OEM partners. This topic provides Microsoft guidance for OEM partners regarding the rounding of hardware display bezels to achieve the best user and developer experience.
While OEM partners are free to differentiate their hardware designs with varying hardware rounding radii and display properties, the operating system only supports the rounding that ships with Windows 11. We do not support arbitrary radii for software to match arbitrary radii for hardware due to high complexity in system implementation, and to avoid placing the burden on the app developer ecosystem to program against an indefinite number of software and hardware radii combinations. Therefore, this topic will help you calculate the effective pixels that your hardware rounding will clip based on the display scale factor so you can know what range of hardware radii to safely use without degrading the UI.
Note
All scale factors in this topic refer to Desktop scaling.
Software Rounding Linear Scaling
Windows 11 ships with two radii available for rounding – 4 px for controls such as buttons and input fields, and 8 px for flyout menus and main app windows. For the purposes of this topic, the 8 px radius is the default software rounding radius.
The design of software rounding in Windows 11 is based on an 8 px radius at 96 DPI, and this scales linearly as shown in the following table:
| DPI Scale Factor | Window Pixels Rounded |
|---|---|
| 100% | 8 |
| 150% | 12 |
| 200% | 16 |
This simple linear relationship serves to illustrate how Windows scales its rounding, but ultimately how much clipping occurs depends on the native resolution of the display and what the scale factor is. For example, a display with a default scale factor of 200% will clip the UI less than the same display set to 100% because 100% would make the content smaller compared to the intended 200%. On this example display, one effective pixel is the same as one physical pixel at 100%, thus more pixels are being clipped.
Calculating the Windows Default Scale Factor and Effective Resolution
The amount of UI clipping that rounded bezels incur is affected by the scale factor of the OS and the display’s resolution and size, a default for which is chosen by the system based on the following formulas and variables.
Important
Because almost all users do not change the default scale factor, it should be the baseline for all calculations relating to UI clipping by rounded bezels.
Pixel Density
The first variable in the default scale factor formula that Windows needs to know is the density of pixels per inch (DPI) of the display. This is given by the following formula and is predetermined by the display manufacturer:
Viewing Distance
Because viewing distance affects how large objects on screen appear to the user when combined with native DPI, the system factors it into its calculations when deciding on a default scale factor. The viewing distance of a display is roughly based on its physical size and device type, as shown in the following table:
Note
This list is not exhaustive for all possible device types.
| Device Type | Viewing Distance (in inches) |
|---|---|
| Small Tablet | 16.3 |
| Tablet | 20 |
| Laptop | 24.5 |
| Desktop | 28 |
| TV | 84 |
Optimal Zoom
Optimal zoom is the precise decimal level of scaling that Windows believes is best for a display. This maps roughly to the default scale factor, which takes the optimal zoom and rounds to the nearest 25% increment within a scoped range. Windows computes the optimal zoom level for a display based on the native DPI and viewing distance. Note that 96 is the default DPI and 28 is the default viewing distance in the system.
Max Scale Factor
The final information Windows requires to determine a default scale factor is the max scale factor of a display, or the level above which it will not scale content to prevent accessibility problems (for example, a message box so large that the OK button is off the screen). The max scale factor is determined by the vertical resolution of the display.
| Vertical Resolution | Max Scale Factor |
|---|---|
| < 900 | 100% |
| >= 900 and < 1080 | 125% |
| >= 1080 and < 1440 | 150% |
| >= 1440 and < 1800 | 200% |
| >= 1800 | 250% |
Default Scale Factor
Finally, the default scale factor is decided based on the optimal zoom. Effectively, the default scale factor simply rounds the optimal zoom to the nearest 25% increment, with a minimum of 100% and a maximum of the Max Scale Factor.
| Optimal Zoom | Default Scale Factor |
|---|---|
| < 1.2 | 100% |
| >= 1.2 and < 1.43 | 125% |
| >= 1.43 and < 1.78 | 150% |
| >= 1.78 and < 2.32 | 200% |
| >= 2.32 and < Max Scale Factor | 250% |
| > Max Scale Factor | Max Scale Factor |
Calculating Effective Resolution
Once the default scale factor is known, the native resolution is scaled to determine the effective resolution for the display.
Walkthrough - Measuring Effective Pixels Clipped by Rounded Hardware Bezels
When evaluating the UI impact of different curvatures and radii of rounded display corners, the first result to measure is the physical pixels that are clipped by the bezel at the native resolution, which can then be divided by the scale factor. In this section, we will walk through an example of measuring the physical pixels clipped for a hypothetical display with the following properties:
| Property or Calculation | Value |
|---|---|
| Screen Size | 12.4 inches |
| Horizontal Resolution | 2560 |
| Vertical Resolution | 1600 |
| Native DPI | 243.46 |
| Viewing Distance | 24.5 inches (Laptop device type) |
| Optimal Zoom | 2.2 |
| Max Scale Factor | 200% |
| Default Scale Factor | 200% |
| Target rounding radius | 2.2 mm |
Circle Formed by the Rounded Bezel
For this example, we would like to round the bezel by 2.2 mm. The arc produced by this amount of rounding forms a quarter circle that can be overlaid with the corner of the normal display rectangle, highlighted in red in the following image:
The radius for the complete circle is calculated with the following formula:
25.4 is the conversion of millimeters to inches, because displays and DPI are measured in inches while rounding radii are measured in millimeters. For our example display, this results in a radius of 21.09 px. The total area of this circle is given by the standard circle area formula:
Our example display's rounded bezel circle has an area of 1395.84 px.
Corner Square
The square that surrounds the rounding circle has a side length equal to the circle's diameter, calculated as follows:
The area of this square is given by the standard square area formula:
For our example, the square has a side length of 42.17 px and an area of 1778.51 px.
Physical Pixels Clipped per Corner
With the radius of the corner circle known, we can calculate the total area clipped by this circle and divide by 4 to obtain the pixels clipped in the display corner.
The number of pixels clipped per corner for our example display is 95.42 px, which includes fractional pixels. In the following image, the desired quadrant area is highlighted by various colors to very roughly illustrate whole pixels clipped by the rounded bezel. This image also shows the outlines of the corner circle and the corner square that surrounds it.
The approximate number of whole pixels clipped in this example is 92 px for this corner of the display.
Effective Pixels Clipped
Finally, we can divide the physical pixels clipped by the scale factor to determine how many effective pixels are occluded.
With a default scale factor of 200%, this results in 47.72 epx clipped per corner for our example.
Recommended Rounding Radii
The amount of UI clipped by a display's rounded bezels is affected by the desired rounding radius, which determines the radius of the bezel corner circle.
Warning
Based on internal testing on a device with 3 mm rounding radius, the recommended range of corner circle radius lengths that works with Windows 11’s rounding design is 16-24 effective pixels (epx). Any radius above of this range can degrade the UI and is not supported. Any radius below this range will not create UI clipping concerns, but could create concentricity tension between the rounding angles of the display and the UI. In other words, the difference between the bezel corner radius and the window rounding radius will begin to differ greatly and will begin to impact the user's visual perception of the system.
Taking the 200% default scale factor into account, the example display from our walkthrough has a rounding circle with an effective radius of 10.55 epx. Therefore, the UI will not be clipped excessively, but the difference in rounding angle betewen the bezel and the Windows 11 rounded window corners must be taken into account.