Yogesh Chauhan's Blog

How to remove border from :visited image, link or button?

in CSS & HTML on August 3, 2020

Many times we want an object in the place of an link or a button and when we click on it, it leave an a border kind of line — an outline. Well, unless you click somewhere on the screen, it won't go away. To remove that, we can use outline property of CSS. 

CSS Outline Property

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

1. Outlines never take up space, as they are drawn outside of an element's content.
2. According to the spec, outlines don't have to be rectangular, although they usually are.

CSS has the following outline properties:

1. outline-style
2. outline-color
3. outline-width
4. outline-offset
5. outline

CSS Outline Style

The outline-style property specifies the style of the outline, and can have one of the following values:

1. dotted – Defines a dotted outline
2. dashed – Defines a dashed outline
3. solid – Defines a solid outline
4. double – Defines a double outline
5. groove – Defines a 3D grooved outline
6. ridge – Defines a 3D ridged outline
7. inset – Defines a 3D inset outline
8. outset – Defines a 3D outset outline
9. none – Defines no outline
10. hidden – Defines a hidden outline

✅ So, we can use the outline:none, to remove the outline.

NOTE

For links, we can use border and outline both properties as null to solve the problem.

Credit: MDN Docs


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Reading Multiple Inputs in SwiftSwiftHow to use GROUPING SETS to boost GROUP BY queries in Postgres?PostgresIntroduction to Angular modules Part 2: NgModules and componentsAngularWhat is a component helper function in React?ReactHow to modify navigation menus in WordPress?WordPressHow to force your website to load securely with an .htaccess file?Miscellaneous