CSS Border inside the element

I had a list of boxes, and on hover I wanted to invert the colors;
div {
background-color: #000;
color: #fff;
}

So I went on and added
div:hover {
background-color:#fff;
color:#000;
}

But then.. the box didn’t look “as …


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

I had a list of boxes, and on hover I wanted to invert the colors;

div {
  background-color: #000;
  color: #fff;
}

So I went on and added

div:hover {
  background-color:#fff;
  color:#000;
}

But then.. the box didn’t look “as a box”. So I added a border:

div:hover {
  background-color:#fff;
  color:#000;
  border: 4px solid #000;
}

but it looked weird because of curse the border is added outside the box.

The best way I found was to use the box-shadow property in this way:

div:hover {
  background-color:#fff;
  color:#000;
  box-shadow: inset 0px 0px 0px 4px #000;
}

Here’s the result:


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com


Print Share Comment Cite Upload Translate Updates
APA

flaviocopes.com | Sciencx (2021-05-13T05:00:00+00:00) CSS Border inside the element. Retrieved from https://www.scien.cx/2021/05/13/css-border-inside-the-element/

MLA
" » CSS Border inside the element." flaviocopes.com | Sciencx - Thursday May 13, 2021, https://www.scien.cx/2021/05/13/css-border-inside-the-element/
HARVARD
flaviocopes.com | Sciencx Thursday May 13, 2021 » CSS Border inside the element., viewed ,<https://www.scien.cx/2021/05/13/css-border-inside-the-element/>
VANCOUVER
flaviocopes.com | Sciencx - » CSS Border inside the element. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/13/css-border-inside-the-element/
CHICAGO
" » CSS Border inside the element." flaviocopes.com | Sciencx - Accessed . https://www.scien.cx/2021/05/13/css-border-inside-the-element/
IEEE
" » CSS Border inside the element." flaviocopes.com | Sciencx [Online]. Available: https://www.scien.cx/2021/05/13/css-border-inside-the-element/. [Accessed: ]
rf:citation
» CSS Border inside the element | flaviocopes.com | Sciencx | https://www.scien.cx/2021/05/13/css-border-inside-the-element/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts