CODEWITHSUNDEEP
javascripthtmlcss
daibatzu
daibatzu

Reputation: 517

Unable to put borders on page

I have a html page (actually an electron app) and I'd like to put a border round it like 2px solid red or something. When I set the css of my body to 2px solid red, the border only shows up on the top and the left. 

body {
 border: 2px solid red;
}

Nowhere else. Can anybody help me figure out what is wrong. I have a fiddle up at: https://jsfiddle.net/5vdmnju2/ Thanks.

Upvotes: 0

Views: 41

Answers (2)

ScottieG
ScottieG

Reputation: 328

Change body { width: 100%; } to body { width: auto; }

width: auto; sets the element to occupy all available horizontal space within its containing block. If it has any horizontal padding or border, the widths of those do not add to the total width of the element whereas width: 100% will set the element’s total width to 100% of its containing block plus any horizontal margin, padding and border.

Upvotes: 1

mattdaspy
mattdaspy

Reputation: 882

Try adding a ::before pseudo-element over the body :

body {
  margin: 0;
  padding: 0;
  position: relative;
}
body::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 2px solid red;
}

Upvotes: 1

Related Questions