How can an svg use the border property as an attribute?

HTML-CSS
#1

How is this allowed?
https://jsfiddle.net/g6oaht8f/162/

I thought an svg can only use certain properties, and border certainly wasn’t one of them.

How is this even able to do what it is doing?

I never knew of a border to be part of an svg’s repertoire.

svg {
  border-bottom: 3px solid red;
  border-right: 3px solid red;
}

Border is not listed as an svg attribute here:

#2

It does have a < style> attribute. You may want to read this:

1 Like
#3

The SVG element itself is just the same as any html element, so you can give it borders, drop shadows or whatever, give it positioning etc. That will apply to the image as a whole. What you’re talking about are the attributes of the SVG primitives inside the overall element (path, rect, ellipse etc)

Like if I have an <img> element that references a picture of a car, I can give the whole image a border, but I can’t apply the CSS border property to the car inside the image. Or if I have a <video>, I can’t use background-color to change the colour of the sky in the video

1 Like
#4

I find outline to work much better here than border.
https://jsfiddle.net/g6oaht8f/180/

Because then the lines aren’t clickable.

Unless something else would be better to use.

svg {
  outline: 3px solid red;
}
#5

What do you mean? Borders aren’t clickable. You need to be careful with outline: it doesn’t work like border, it doesn’t take into account element width.

#6