Browser Playground for educational purposes

border-box

My width is 300px. And thanks to box-sizing: border-box the border doesn't change my width.

rem font-size

1rem

2rem

3rem

4rem

5rem

All text on this page will look different depending on the operating system due to system fonts being used.

focus & focus-visible & focus-within

I have a red border on :focus

I have a red border on :focus-visible

When this input has focus the parent div gets a border thanks to :focus-within

flex

flex
second line

flex

measure me

card