---
# System prepended metadata

title: Highlight Border
tags: [Chromium-Graphics, elkurin-daily-note]

---

# Highlight Border

Highlight border is one of the system UI components used in ChromeOS.  
It's a border outside of the window to have a higher contrast between the background and the content.  
There are several types of border depending on its role. The border with contrast or lower contrast, with inner color, the border synchronizing with shadow...

## In Chromium Code
[HighlightBorder](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/highlight_border.h;l=22;drc=c04ddffd58abc5fef8b9d30acc64bab946b11c18) is derivced from views::Border.  
In ChromeOS UI, there are lot of rounded components. HighlightBorder is a border with rounded rectangle and has inner and outer color.  

### Type

[Border types](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/highlight_border.h;l=25;drc=c04ddffd58abc5fef8b9d30acc64bab946b11c18) are:
- kHighlightBorderNoShadow
- kHighlightBorderOnShadow
- kHighlightBorder1
- kHighlightBorder2
- kHighlightBorder3

No shadow and on shadow is literally a border for the UI without a shadow or a border for the UI with a shadow.  
1,2,3 ones are different depending on how contrast is strong.

## Methods
[PaintBorderToCanvas](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/highlight_border.h;l=66;drc=c04ddffd58abc5fef8b9d30acc64bab946b11c18) paints the highlight border on canvas.  
Rounded corner is described as [radii](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/highlight_border.cc;l=40;drc=4a0d413ada84db50379ab8f35ec2630cd16c800b) with 8 elements having 2 values describing the corner image for each 4 elements.  
`rounded_corner_` for a constructor is using a same integer `corner_radius`.  
In the usual rounded corner, the radius is the same for all 4 corners.
This border is decorated on the client side. It's rendered as a subsurface on wayland architecture.

# HighlightBorderOverlay
[HighlightBorderOverlay](https://source.chromium.org/chromium/chromium/src/+/main:chromeos/ui/frame/highlight_border_overlay.h;l=28;drc=609ca5e74e0f79571a889d2af7415acf762b4123) adds the highlight border to windows.  
This is notified on window's property changes such as OnWindowBoundsChanged, OnWindowPropertyChanged and OnWindowDestroying.  
The border view is overlayed on window updates.