Simulate "Inner Border" in CSS

simulate inner border in CSS?

You have two options:

1. Add div { box-sizing: border-box }. This switches the elements to the 'traditional' model, where borders and paddings are included in the width (supported from IE8+)
2. Use the Flexible Box model (IE10+)
3. Add the borders as pseudo-elements (IE8+)

Using pseudo-elements (remove the border from #spanRed):

#spanRed:after {
    content:' ';
    display:block;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0; 
    border:4px solid red;
}

Bear in mind that using position:fixed as the basis for a layout is very fragile.

edit: if you need IE7 support, add the extra element via JS:

$('#spanRed').append('<span class="after" />')

Then reference it in the CSS. Be aware that you have to repeat the whole style, you can't use both selectors together otherwise IE7 ignores the rule.

Or, since these are all "useless" elements anyway, just add it to the HTML:

<div id="spanRed">
   <span class="inner"></span>
</div>

Here's your code using that: http://jsfiddle.net/eh9rM/2/

Inner border CSS - Possible

You can use an inset box-shadow. DEMO

button {
    border: solid 1px #aaa;

    // Adds the inner "border"
    box-shadow: 0 0 1px #fff inset;

    background-image: linear-gradient(to bottom, #cfcfcf 0%, #c0c0c0 100%);
    padding: 20px;
    border-radius: 10px;
}

If you want to set the "width" of the border you can use a fourth value. Example with 3px wide inset box-shadow:

box-shadow: 0 0 0 3px #fff inset;

More info on box-shadows, MDN

CSS Inner Border?

According to the box model, padding is between the content and border. You should be able to style the images like:

 .img-btn {
     background: #FFF; // inner border color
     padding: 2px; // inner border width
     border: 2px solid #[yourgreen]; // outer border
 }

You shouldn't need any extra divs to accomplish this, even for your pure CSS button. Following style is for the case when the image is a background-image:

.img-btn {
    background: #FFF url('your.img') no-repeat;
    padding: 2px;
    border: 2px solid #[yourgreen];
    width: [image width];
    height: [image height];
    background-position: center center;
}

Here's a DEMO of double-border as described above.

Inner Border With Different Values Each

To make it an inner border, use two box-shadows on the element, separated with a comma, and use negative values on the second set.
Like this:

box-shadow: inset 10px 20px 0px #000, inset -80px -40px 0px #000;

Here is a jsfiddle demo: http://jsfiddle.net/dr_lucas/23Egu/326/

This is the cross-browser compatible CSS:

-webkit-box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;
-moz-box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;
box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;

Note that if you need it to be compatible with old IE versions that don't support box-shadow, you can use CSS3pie:
http://css3pie.com/

Hope this helps.

How to place a border inside a grid?

Use a pseudo-element.

In grid layout (like in flex layout), pseudo-elements on the container are considered items. Therefore, insert a pseudo that will simulate a border across your desired grid area.

.expandeble::after {
  content: "";
  border: 1px solid red;
  height: 0;
  grid-column-start: 3;
  grid-column-end: 9;
  grid-row-start: 3;
}

.expandeble {  display: grid;  height: 6.15vh;  grid-template-columns: 15.62vw 2.01vw 21.87vw 12.08vw 19.45vw 5.76vw 2.01vw 1.18vw 5vw 15.83vw;  grid-template-rows: minmax(18px, 1.76vw) minmax(max-content, 3.51vh) 1.76vw;}
.expID {  grid-column-start: 3;  grid-row-start: 2;}
/* new */.expandeble::after {  content: "";  border: 1px solid red;  height: 0;  grid-column-start: 3;  grid-column-end: 9;  grid-row-start: 3;}

<div class="footer">  <div class="expandeble">    <div class="expID">      <label class="idLabel">XXXX</label>    </div>   </div></div>

How to add border inner side of image using CSS

That one's quite simple. Put the image in a container, and give it an after. Give that after a absolute position and a border.

See the example:

.gallery {  height: 300px; /* change/remove as required */  width: 400px; /* change/remove as required */  border-radius: 10px; /* change/remove as required */  overflow: hidden;  position: relative;}
.picture:after {  position: absolute;  top: 10px;  left: 10px;  right: 10px;  bottom: 10px;  border: 2px solid pink;  border-radius: 10px;  content: '';  display: block;}

<div class="gallery">    <div class="picture">            <img id="main-product-img-43" itemprop="image" title="Picture of $25 Virtual Gift Card" src="http://lorempixel.com/400/300" alt="Picture of $25 Virtual Gift Card">
    </div></div>

How to make round corners to both inside of a box and its border?

Inner border calculations

First, you'll need to remove -vendor-background-clip: padding-box or set them to border-box the default in order to achieve the inner border radius.

The inner border radius is calculated as the difference of the outer border radius (border-radius) and the border width (border-width) such that

inner border radius = outer border radius - border width

Whenever the border-width is greater than the border-radius, the inner border radius is negative and you get some awkward inverted corners. Currently, I don't believe there is a property for adjusting the inner-border-radius, so you'll need to calculate it manually.

In your case:

inner border radius = 6px - 5px = 1px

Your new CSS should be:

.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }

Simply subtract the border-radius (6px) values from the border-width value (5px) in order to achieve your desired inner-border-radius:

---

Code that works for me

Tested on Firefox 3.x, Google Chrome, and Safari 5.0

 .radius-all { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); } /* Note that white on white does not distinguish a border */

---

Adding color overlays in JavaScript

<script type="text/javascript">
    var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;;

    // insert opacity decreasing code here for hexadecimal

    var header = document.getElementsByTagName('header')[0];
    header.style.backgroundColor = bodyBgColor;
</script>

I'm not entirely sure how to do hexadecimal arithmetic in JavaScript but I'm sure you can find an algorithm in Google.

---

Applying General Borders

Are you using a separate box <div> for your border through its background property? If so, you'll need to apply border-radius and its vendor specific properties on both the border box and the inner box:

<div id="border-box" style="border-radius: 5px;">
    <div id="inner-box" style="border-radius: 5px;">
    </div>
</div>

A much more efficient way would simply have the inner-box manage its own border:

<div id="inner-box" style="border: 4px solid blue; border-radius: 5px">
    <!-- Content -->
</div>

CSS-wise, you could just declare a .rounded-border class and apply it to every box that will have rounded borders:

.rounded-borders {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}

And apply the class to any boxes that will have rounded borders:

<div id="border-box" class="rounded-borders">
    <div id="inner-box" class="rounded-borders">
    </div>
</div>

For a single box element, you'll still be required to declare the border size in order to be shown:

<style type="text/css">
    #inner-box { border: 4px solid blue; }
</style>

<div id="inner-box" class="rounded-borders">
</div>

How to align borders on a element?

Here's a quick and easy fix:

You have the black border rule applied to just one box:

a:first-child {  
    padding: 1em;   
    border: 0.2em solid #111;
}

Instead, apply the rule to both boxes:

a {  color:black;  text-decoration: none;  display: inline-block;  border: 0.2em solid #111;}a:first-child {    padding:1em;   }a:last-child {  padding: 1em;  color: white;    background-color: black;  }

<div>  <a href="#">BTN 01</a>  <a href="#">BTN 02</a></div>

Using box-shadow to create inner border for image

Here's how. The trick is to wrap your image in another element and use an absolutely positioned before pseudo-element.

Responsive Grid with Borders on the Inside Only

You don't need even and last classes. nth-child() does the trick.

http://jsfiddle.net/dzyyubz6/1/

<div class = "box">
    <p>Box 1</p>
</div>

<div class = "box">
    <p>Box 2</p>
</div>

<div class = "box">
    <p>Box 3</p>
</div>

<div class = "box">
    <p>Box 4</p>
</div>

<div class = "box">
    <p>Box 1</p>
</div>

<div class = "box">
    <p>Box 2</p>
</div>

<div class = "box">
    <p>Box 3</p>
</div>

<div class = "box">
    <p>Box 4</p>
</div>

.box {
    float: left;
    width: 25%;
    height: 300px;
    text-align: center;
    border-right: 1px solid black;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;   
    box-sizing: border-box; 
}
.box:nth-child(4n + 4){
    border: none;
}

@media screen and (max-width: 600px) {
    .box {
        width: 33.3333333333%;
    }
    .box:nth-child(4n + 4){
        border-right: 1px solid black;
    }
    .box:nth-child(3n + 3){
        border: none;
    }
}

@media screen and (max-width: 450px) {
    .box {
        width: 50%;
    }
     .box:nth-child(3n + 3){
        border-right: 1px solid black;
    }
     .box:nth-child(2n + 2){
        border: none;
    }
}

@media screen and (max-width: 300px) {
    .box {
        width: 100%;
        border: none !important;
    }
}

---

Related Topics