CSS Borders out of the body

Question

Hi, I tried to add simple borders arround my canvas, at the upper left corner it's work but at the lower right ... border brim over :(

##############################################

This is my javascript :

//VARIABLES

var WIDTH = 500;
var HEIGHT = 500;

var FPS = 60;

//CANVAS INIT

c = document.createElement('canvas');
document.body.appendChild(c);
ctx = c.getContext('2d');

WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
c.setAttribute('width', WIDTH);
c.setAttribute('height', HEIGHT);
c.setAttribute('id', 'canvas');

//FUNCTIONS

function clear(){
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, WIDTH, HEIGHT);
}

function update(){
clear();
}

setInterval(update, 1000/FPS);

###########################################

And this is my css :

body{
margin: 0px;
padding: 20px;
overflow: hidden;
background-color: #333;
}
#canvas{
border : dashed white;
}

Answer 1

not #canvas {} but
canvas {
border-left: 1px solid black; (choose what you want)
border-top: .....
}

or border: 2px outset #CCC; for example

Answer 2

np everybody need to learn :D even if you know a lot

Answer 3

#name {
}
will apply to the element with an ID set to "name"

.name {
}
will apply to all the element with a class set to "name"

name {
}
will apply to all the name elements ;)

Also, as Dorian said you have to set a border since the default one is 0.

It's kinda funny how we all 3 are French but had this conversation in English :)

Answer 4

Omelette du fromage

Answer 5

thanks I have to learn (again) CSS I think 😅

Answer 6

mdr euh noxfly mdrrrrr 😂😂 merciiiii x)

Answer 7

Baguette ;)

Answer 8

ouai mdr j'avoue on parlait tous anglais XDDD

Answer 9

xD