CODEWITHSUNDEEP
csscanvasborder
Thomas
Thomas

Reputation: 77

How to add a border around a canvas?

I want to now how you can add a border around a canvas. So simply with the CSS code

border:black 3px solid;

you get the border in the canvas. And I dont want the border in the canvas. I want the border around the canvas. I want this with CSS.

Thanks for helping!

my css code:

#my_canvas {
    max-width: 98%;
    max-height: 98%;
    height: auto;
    width: auto;
    margin:auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:white;
    border:black 3px solid;
}
#center {
    max-width: 66.5%;
    max-height: 95%;
    height: auto;
    width: auto;
    margin:auto;
    background:;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
Body {
    background-color: slategrey;
}

Upvotes: 4

Views: 20558

Answers (3)

stranger4js
stranger4js

Reputation: 267

may i suggest this:

<canvas id="canvas"></canvas>
  #canvas{
border:2px solid black !important;}

Upvotes: 1

Michelangelo
Michelangelo

Reputation: 5958

outline: black 3px solid;

Outline will draw a line outside the element.

Upvotes: 9

BurpmanJunior
BurpmanJunior

Reputation: 1018

It may be caused by the canvas inheriting box-sizing: border-box;

Try applying box-sizing: padding-box; to the canvas CSS.

Upvotes: 0

Related Questions