Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Icon inherits text colour automatically */ .icon { fill: currentColor; width: 1em; height: 1em; vertical-align: middle; } /* Border matches link colour without repeating the value */ a.fancy-link { color: #1a73e8; border-bottom: 2px solid currentColor; text-decoration: none; } a.fancy-link:hover { color: #b31412; /* border colour changes automatically */ } /* Box shadow using currentColor for cohesion */ .badge { color: hsl(142 71% 35%); border: 1px solid currentColor; box-shadow: 0 0 0 3px hsl(142 71% 35% / 0.2); padding: 2px 8px; border-radius: 999px; } /* Force a non-inheriting property to inherit */ .child-border { border-color: inherit; }
Result
Open