can we use border and border image at the same time?

81 Replies

No, but you can use outline or box shadow as substitutes for the extra border. You could also create a before or after that has its own border.

curator•13mo ago

yeah i am using after, can you share any resource to convert svg path converter

Choo♚𝕂𝕚𝕟𝕘•13mo ago

I don't understand the question. You want to convert an SVG to a path that can be used in something like a clip path? You don't need any converter for that. You can just copy and paste the part of the SVG code that specifies the path.

curator•13mo ago

so basically i am using this svg for clipping my div:

<svg className={styles.svg}>
                <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.586,0 C0.555,0.001,0.457,0.002,0.368,0.003 L0.207,0.005 L0.151,0.003 C0.091,0.001,0.049,0.001,0.033,0.002 C0.028,0.002,0.019,0.004,0.015,0.005 L0.007,0.008 L0.006,0.203 C0.005,0.311,0.003,0.444,0.002,0.498 C-0.001,0.626,-0.001,0.854,0.002,0.906 C0.006,0.965,0.01,0.987,0.018,0.991 C0.022,0.993,0.042,0.995,0.065,0.997 C0.118,0.999,0.206,0.998,0.408,0.994 C0.47,0.993,0.545,0.992,0.574,0.992 C0.626,0.992,0.631,0.992,0.684,0.994 C0.776,0.999,0.802,1,0.862,1 C0.909,1,0.92,1,0.934,0.999 C0.954,0.997,0.97,0.994,0.976,0.991 C0.986,0.985,0.991,0.955,0.997,0.866 C1,0.8,1,0.114,0.997,0.075 C0.992,0.035,0.987,0.016,0.98,0.009 C0.977,0.005,0.975,0.005,0.966,0.003 C0.944,0.001,0.918,0,0.779,0 C0.704,0,0.617,0,0.586,0"></path></clipPath>
            </svg>

<svg className={styles.svg}>
                <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.586,0 C0.555,0.001,0.457,0.002,0.368,0.003 L0.207,0.005 L0.151,0.003 C0.091,0.001,0.049,0.001,0.033,0.002 C0.028,0.002,0.019,0.004,0.015,0.005 L0.007,0.008 L0.006,0.203 C0.005,0.311,0.003,0.444,0.002,0.498 C-0.001,0.626,-0.001,0.854,0.002,0.906 C0.006,0.965,0.01,0.987,0.018,0.991 C0.022,0.993,0.042,0.995,0.065,0.997 C0.118,0.999,0.206,0.998,0.408,0.994 C0.47,0.993,0.545,0.992,0.574,0.992 C0.626,0.992,0.631,0.992,0.684,0.994 C0.776,0.999,0.802,1,0.862,1 C0.909,1,0.92,1,0.934,0.999 C0.954,0.997,0.97,0.994,0.976,0.991 C0.986,0.985,0.991,0.955,0.997,0.866 C1,0.8,1,0.114,0.997,0.075 C0.992,0.035,0.987,0.016,0.98,0.009 C0.977,0.005,0.975,0.005,0.966,0.003 C0.944,0.001,0.918,0,0.779,0 C0.704,0,0.617,0,0.586,0"></path></clipPath>
            </svg>

and for the border image of the ::after i am using the svg i am having:

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="428.000000pt" height="1298.000000pt" viewBox="0 0 428.000000 1298.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1298.000000) scale(0.100000,-0.100000)"
fill="#0149A8" stroke="none">
<path d="M2505 12960 c-132 -5 -549 -21 -927 -36 l-687 -27 -239 27 c-254 29
-432 35 -501 16 -23 -6 -58 -26 -77 -43 l-35 -32 -5 -2530 c-2 -1391 -9 -3113
-14 -3825 -13 -1655 -13 -4601 0 -5275 14 -772 31 -1049 65 -1102 19 -28 103
-59 201 -73 226 -32 599 -24 1459 31 264 17 583 32 710 32 220 2 240 0 465
-35 394 -62 502 -72 760 -73 197 0 247 3 307 19 82 20 150 61 175 103 44 75
65 461 90 1618 19 851 19 9740 0 10235 -19 526 -39 771 -70 865 -15 45 -21 51
-62 66 -94 35 -203 41 -795 44 -319 2 -688 -1 -820 -5z m1197 -20 c226 -10
389 -29 429 -50 24 -14 36 -61 54 -210 20 -176 33 -448 45 -930 15 -632 17
-8689 2 -9585 -22 -1321 -46 -1874 -85 -1993 -16 -49 -74 -87 -172 -113 -68
-19 -108 -22 -270 -22 -209 0 -357 14 -725 69 -129 19 -282 39 -340 43 -126
10 -400 0 -925 -34 -644 -40 -842 -48 -1124 -42 -413 9 -490 31 -504 142 -14
105 -27 388 -39 840 -15 588 -15 4084 1 5890 6 699 11 2312 11 3585 0 2041 2
2318 15 2337 8 12 36 30 62 40 68 26 259 23 483 -7 208 -28 346 -29 870 -6
1171 51 1797 63 2212 46z"/>
</g>
</svg>

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="428.000000pt" height="1298.000000pt" viewBox="0 0 428.000000 1298.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1298.000000) scale(0.100000,-0.100000)"
fill="#0149A8" stroke="none">
<path d="M2505 12960 c-132 -5 -549 -21 -927 -36 l-687 -27 -239 27 c-254 29
-432 35 -501 16 -23 -6 -58 -26 -77 -43 l-35 -32 -5 -2530 c-2 -1391 -9 -3113
-14 -3825 -13 -1655 -13 -4601 0 -5275 14 -772 31 -1049 65 -1102 19 -28 103
-59 201 -73 226 -32 599 -24 1459 31 264 17 583 32 710 32 220 2 240 0 465
-35 394 -62 502 -72 760 -73 197 0 247 3 307 19 82 20 150 61 175 103 44 75
65 461 90 1618 19 851 19 9740 0 10235 -19 526 -39 771 -70 865 -15 45 -21 51
-62 66 -94 35 -203 41 -795 44 -319 2 -688 -1 -820 -5z m1197 -20 c226 -10
389 -29 429 -50 24 -14 36 -61 54 -210 20 -176 33 -448 45 -930 15 -632 17
-8689 2 -9585 -22 -1321 -46 -1874 -85 -1993 -16 -49 -74 -87 -172 -113 -68
-19 -108 -22 -270 -22 -209 0 -357 14 -725 69 -129 19 -282 39 -340 43 -126
10 -400 0 -925 -34 -644 -40 -842 -48 -1124 -42 -413 9 -490 31 -504 142 -14
105 -27 388 -39 840 -15 588 -15 4084 1 5890 6 699 11 2312 11 3585 0 2041 2
2318 15 2337 8 12 36 30 62 40 68 26 259 23 483 -7 208 -28 346 -29 870 -6
1171 51 1797 63 2212 46z"/>
</g>
</svg>

so bascially i want to convert the the clipping svg's path same as the image i am using for the after

Choo♚𝕂𝕚𝕟𝕘•13mo ago

Just use the string value of d in the path element.

curator•13mo ago

curator•13mo ago

this is what i am currently its not working actually

Choo♚𝕂𝕚𝕟𝕘•13mo ago

I think you asked about this several weeks ago and I shared a codepen with proof that it works but you never looked at it.

Choo♚𝕂𝕚𝕟𝕘•13mo ago

That was you: https://codepen.io/chooking/pen/poqvVrN

ChooKing

CodePen

Curator SVG to Path

...

Choo♚𝕂𝕚𝕟𝕘•13mo ago

I explained before that the only issue was the scale. Your SVG path is much larger than you need and there is no automated way to scale that path wihin CSS, so you had to do the math on it.

curator•13mo ago

yeah i did try this, but the height is giving me the issue

curator•13mo ago

Choo♚𝕂𝕚𝕟𝕘•13mo ago

I know. That's because you have a scale transform in your SVG that makes the path the right size. That can't be done with the CSS.

curator•13mo ago

also i think it is clipping the internal div instead of just the border of the div

Choo♚𝕂𝕚𝕟𝕘•13mo ago

The math is simple. You have a 0.1 scale, so you only need to divide all values by 10.

Gaming

Programming

can we use border and border image at the same time?