`MDN Border-image generator`: Move `border-image-source` to the end in `CSS Code` output

[strarsis]

Currently, properties are listed after the border-image-source property, like border-style. As border-image-source contains the encoded image, it can become quite lengthy, and often the image is referenced differently (e.g. by URL or by some asset management in the build step). Hence the developer may copy everything until border-image-source and then just skip everything else, as there can be a lot to scroll down - and thereby easily miss other important properties, as border-style (which is required by Chrome to make the border image actually visible).

[jsnkuhn]

so current order is:

border-image-slice: 27 27 27 27;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
border-image-source: url("border-image-1.png");
border-style: solid; 

Personally what I usually do is put the border declaration up front so i don't forget it followed by the image-source. So that would be this:

border-style: solid;
border-image-source: url("border-image-1.png");
border-image-repeat: stretch stretch;
border-image-slice: 27 27 27 27;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;

FYI, have confirmed that the border-style requirement in Chrome is a bug that will hopefully be getting fixed this year. By the spec border-image-width alone should be enough to paint the border.

[Rizalsabuga]

border-style: solid; border-image-source: url("border-image-1.png"); border-image-repeat: stretch stretch; border-image-slice: 27 27 27 27; border-image-width: 20px 20px 20px 20px; border-image-outset: 0px 0px 0px 0px;

[Rizalsabuga]

border-style: solid; border-image-source: url("border-image-1.png"); border-image-repeat: stretch stretch; border-image-slice: 27 27 27 27; border-image-width: 20px 20px 20px 20px; border-image-outset: 0px 0px 0px 0px;

[Rizalsabuga]

border-style: solid; border-image-source: url("border-image-1.png"); border-image-repeat: stretch stretch; border-image-slice: 27 27 27 27; border-image-width: 20px 20px 20px 20px; border-image-outset: 0px 0px 0px 0px;

[caugner]

Currently, the border properties are roughly ordered by appearance in the tool, except for border-image-source. It's true that a different order could make more sense.