DEV Community

CSS Outline Guides

A CSS Outline is drawn outside the borders of the CSS. These are tricky concepts, please read the guides thoroughly.

This is a collection of top and trending guides written by the community on subjects related to CSS Outline concepts. For all things CSS, check out the CSS tag! Please contribute more posts like this to help your fellow developer in need.

Display the Focus Outline Only for Keyboard Usage with React Hooks

Clickable elements like buttons have an outline by default when targeted by the keyboard or activated by the mouse. Especially the latter behavior is not so popular, because it's ugly. Especially, when a click on a button doesn't load a new page and the outline will remain until you click somewhere else.

Remove outline when click but keep it when tab in React

When you click on the button "Experience F8 2019", there's no blue outline that we hate (mostly designer). but when I tab on the website, I see the blue outline again.

CSS Text Outline | Nike Shoes Parallax Text Effect

Hello guys in this tutorial we will create a Nike shoe parallax text outline effect using Html And Css

Custom outline style with CSS

You can custom the outline of the component when you focus on it. CSS allows you to custom these properties:

Rare CSS: outline-offset

What is outline-offset and how is it a useful CSS property?

Don't Override CSS Outline Focus Styles

It’s common to see websites remove the focus outline of focusable items. Removing outline styles, however, causes problems for many users. To keep your websites and web apps accessible focusable items must have a focus outline. Users with mobility disabilities may only be able to use a keyboard or non-mouse interaction with your web app. By removing the outline, your web app can quickly become unusable.

Happy CSS Outline coding!