CODEWITHSUNDEEP
htmlcss
fabriciorissetto
fabriciorissetto

Reputation: 10063

How to dynamically show border on a div without changing its internal measures?

In below example I have two divs:

enter image description here

Both have the same content and almost the same style, except that the second div has one more style: border: 1px solid black;

The problem is that this border is doing a resize of the internal content and I don't want this. I want to put a border on some divs on the page dynamically during the page load, but without chage any measures or changes in the content.

Has a way of doing this? I can use javascript if necessary, but a solution that only use css will be more apreciated.

Upvotes: 2

Views: 1763

Answers (4)

Shyam
Shyam

Reputation: 792

You have 2 options.

  • Use css : 1px solid transparent; and
  • Use css : box-sizing:border-box;

Upvotes: 0

user3153633
user3153633

Reputation: 21

You can use transparent borders, then when you will apply border color the size will remain the same. Here is a fiddle

html 

<div>
</div>

css 

div {
    border:2px solid transparent;
    width:200px;
    height:200px;
    background:#eeeeee;
    margin:10px;
}

js

$("#red").on('click',function() {
    $("div").css("border","2px solid red");
});

$("#transparent").on('click',function() {
    $("div").css("border","2px solid transparent");
});

Upvotes: 2

Mat&#237;as C&#225;nepa
Mat&#237;as C&#225;nepa

Reputation: 5974

Instead of border use outline

div.border
{
    outline: 1px solid black;
}

DEMO

Upvotes: 3

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

You can also use a transparent border, like: border: 1px solid transparent; Then apply any other color you want.

Upvotes: 2

Related Questions