CSS Inset Borders

Question

I need to create a solid color inset border  This is the bit of CSS I m using  border  10px inset rgba 51 153 0 0 65    Unfortunately that creates a 3D ridged border  ignore the squares and dark description box

User · Answer

Simple SCSS solution with pseudo-elements

Live demo: https://codepen.io/vlasterx/pen/xaMgag

_x000D_

// Change border size here_x000D_
$border-width: 5px;_x000D_
_x000D_
.element-with-border {_x000D_
 display: flex;_x000D_
 height: 100px;_x000D_
 width: 100%;_x000D_
 position: relative;_x000D_
 background-color: #f2f2f2;_x000D_
 box-sizing: border-box;_x000D_
 _x000D_
 // Use pseudo-element to create inset border_x000D_
 &:before {_x000D_
  position: absolute;_x000D_
  content: ' ';_x000D_
  display: flex;_x000D_
  border: $border-width solid black;_x000D_
  left: 0;_x000D_
  right: 0;_x000D_
  top: 0;_x000D_
  bottom: 0;_x000D_
  border: $border-width solid black;_x000D_
  // Important: We must deduct border size from width and height_x000D_
  width: calc(100% - $border-width); _x000D_
  height: calc(100% - $border-width);_x000D_
 }_x000D_
}

_x000D_

<div class="element-with-border">_x000D_
  Lorem ipsum dolor sit amet_x000D_
</div>

_x000D_

User · Answer

To produce a border inset within an element the only solution I ve found  and I ve tried all the suggestions in this thread to no avail  is to use a pseudo-element such as  before  E g    has-inset-border before     content   foo      you need something or it will be invisible at least on Chrome      color  transparent    position  absolute    left  10px    right  10px    top  10px    bottom  10px    border  4px dashed red      The box-sizing property won t work  as the border always ends up outside everything   The box-shadow options has the dual disadvantages of not really working and not being supported as widely  and costing more CPU cycles to render  if you care

User · Answer

I know this is three years old  but thought it might be helpful to someone   The concept is to use the  after  or  before  selector to position a border within the parent element        container          position relative    Position must be set to something               container after          position relative          top  0          content             left 0          height  100     Set pixel height and width if not defined in parent element           width  100             -webkit-box-sizing border-box          -moz-box-sizing border-box          -ms-box-sizing border-box          box-sizing border-box           border 1px solid  000    set your border style

User · Answer

I don t know what you are comparing to   But a super simple way to have a border look inset when compared to other non-bordered items is to add a border   px solid transparent  to whatever items do not have a border    It will make the bordered item look inset   http   jsfiddle net cmunns cgrtd

User · Answer

You can do this    thing     border  2px solid transparent     thing hover     border  2px solid green

User · Answer

It s an old trick  but I still find the easiest way to do this is to use outline-offset with a negative value  example below uses -6px   Here s a fiddle of it   I ve made the outer border red and the outline white to differentiate the two    outline-offset   width 300px  height 200px  background  333c4b  border 2px solid red  outline 2px  fff solid  outline-offset -6px      lt div class  outline-offset  gt  lt  div gt

User · Answer

If you want to make sure the border is on the inside of your element  you can use  box-sizing border-box   this will place the following border on the inside of the element   border  10px solid black    similar result you d get using the additonal parameter inset on box-shadow  but instead this one is for the real border and you can still use your shadow for something else    Note to another answer above  as soon as you use any inset on box-shadow of a certain element  you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing   Both solutions should as well get you rid of the undesired 3D effects  Also note both solutions are stackable  see the example I ve added in 2018    x000D   x000D   example-border   x000D    width 100px  x000D    height 100px  x000D    border 40px solid blue  x000D    box-sizing border-box  x000D    float left  x000D    x000D   x000D   example-shadow   x000D    width 100px  x000D    height 100px  x000D    float left  x000D    margin-left 20px  x000D    box-shadow 0 0 0 40px green inset  x000D    x000D   x000D   example-combined   x000D    width 100px  x000D    height 100px  x000D    float left  x000D    margin-left 20px  x000D    border 20px solid orange  x000D    box-sizing border-box  x000D    box-shadow 0 0 0 20px red inset  x000D    x000D   lt div class  example-border  gt  lt  div gt  x000D   lt div class  example-shadow  gt  lt  div gt  x000D   lt div class  example-combined  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I would recomnend using box-sizing        -webkit-box-sizing border-box    -moz-box-sizing border-box    -ms-box-sizing border-box    box-sizing border-box      bar    border  10px solid green

User · Answer

You may use background-clip  border-box   Example    example   padding  2em  border  10px solid rgba 51 153 0 0 65   background-clip  border-box  background-color  yellow      lt div class  example  gt Example with background-clip  border-box  lt  div gt

User · Answer

If box-sizing is not an option  another way to do this is just to make it a child of the sized element   Demo  CSS   box     width  100px    height  100px    display  inline-block    margin-right  5px     border     border  1px solid    display  block     medium   border-width  10px     large    border-width  25px       HTML   lt div class  box  gt     lt div class  border small  gt A lt  div gt   lt  div gt   lt div class  box  gt     lt div class  border medium  gt B lt  div gt   lt  div gt   lt div class  box  gt     lt div class  border large  gt C lt  div gt   lt  div gt

User · Answer

So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn t look all that good I fixed it with the following    top-menu  menu-item a hover       border-bottom 4px solid  ec1c24      padding-bottom 14px  important     top-menu  menu-item a       padding-bottom 18px  important      I hope this will help someone out there

User · Answer

You could use box-shadow  possibly   something       background  transparent url https   i stack imgur com RL5UH png  50  50  no-repeat      min-width  300px      min-height  300px      box-shadow  inset 0 0 10px  0f0      x000D   x000D   something     background  transparent url https   i stack imgur com RL5UH png  50  50  no-repeat    min-width  300px    min-height  300px    box-shadow  inset 0 0 10px  0f0    x000D   lt div id  something  gt  lt  div gt  x000D   x000D   x000D   This has the advantage that it will overlay the background-image of the div  but it is  of course  blurred  as you d expect from the box-shadow property   To build up the density of the shadow you can add additional shadows of course   something       background  transparent url https   i stack imgur com RL5UH png  50  50  no-repeat      min-width  300px      min-height  300px      box-shadow  inset 0 0 20px  0f0  inset 0 0 20px  0f0  inset 0 0 20px  0f0      x000D   x000D   something     background  transparent url https   i stack imgur com RL5UH png  50  50  no-repeat    min-width  300px    min-height  300px    box-shadow  inset 0 0 20px  0f0  inset 0 0 20px  0f0  inset 0 0 20px  0f0    x000D   lt div id  something  gt  lt  div gt  x000D   x000D   x000D    Edited because I realised that I m an idiot  and forgot to offer the simplest solution first  which is using an otherwise-empty child element to apply the borders over the background   x000D   x000D   something     background  transparent url https   i stack imgur com RL5UH png  50  50  no-repeat    min-width  300px    min-height  300px    padding  0    position  relative     something div     position  absolute    top  0    left  0    right  0    bottom  0    border  10px solid rgba 0  255  0  0 6     x000D   lt div id  something  gt     lt div gt  lt  div gt   lt  div gt  x000D   x000D   x000D    Edited after  CoryDanielson s comment  below   jsfiddle net dPcDu 2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images    x000D   x000D   something     background  transparent url https   i stack imgur com RL5UH png  50  50  no-repeat    min-width  300px    min-height  300px    box-shadow  inset 0 0 0 10px rgba 0  255  0  0 5     x000D   lt div id  something  gt  lt  div gt  x000D   x000D   x000D

[html] CSS Inset Borders

Examples related to html

Examples related to css

Examples related to border