MANIFEST V3 CHROME EXTENSION
BORDERLY
High Precision Web Metrics
Inspect component padding, calculate margin collapse, and audit element alignment gaps in real-time.
DOM Performance
1-Click Hotkey Activation
Toggle outlines instantaneously on any browser tab without breaking focus or opening extension popups.
Zero-Lag Canvas Rulers
Pixel-perfect coordinate distance capture (dx, dy, hyp) with crosshair alignment guides.
Full CSS Selector Control
Target specific DOM nodes with custom stroke widths (1-5px) and preset highlight colors.
100% Local & Private
Runs purely inside your local browser tab with zero external network requests or analytics.
BEHIND THE SCREEN, BEYOND THE LAYOUT
FEATURES
One-Click Element Outlining
Toggle outlines on every DOM element or target specific node rules with custom CSS selectors (div, .container, #header). Customize stroke width (1–5px) and pick highlight colors.
Drag-to-Measure Pixel Ruler
Click and drag crosshairs anywhere on screen to calculate coordinate distances, rotation angles, and pinned measurements in real-time.
Smart Element Spacing Rulers
Hover hit-testing automatically calculates margins, padding, and alignment gaps relative to parent and child nodes in horizontal or vertical modes.
Keyboard-First Ergonomics
Toggle Borderly instantly from anywhere using Alt+B without breaking your flow, opening extension popups, or clicking toolbar icons.
Flexible Floating Status Indicator
In-page draggable corner status badge for quick state control. Click to dock in any viewport corner.
Instant Chrome Storage Sync
Automatic cross-device synchronization of outline colors, stroke preferences, and filter rules via chrome.storage.sync.
INTERACTIVE COMPARISON
HOW IT WORKS
Noise-Canceling Headphones
Spatial audio with dynamic head tracking.
Mechanical Keyboard
Hot-swappable tactile RGB switches.
FAST & ERGONOMIC
SHORTCUTS & SETUP
Keyboard Shortcuts
3-Step Walkthrough
Add to Chrome
Click the primary button to install Borderly directly from the Chrome Web Store.
Pin to Toolbar
Pin Borderly to your extension bar for instant preference and status access.
Press Alt + B
Open any web tab, hit Alt + B, and start inspecting DOM element boundaries in real-time.