CSS Generators

Fancy frames using clip-path: shape()

Size of the frame
Radius
Horizontal Granularity
Vertical Granularity
Corner Granularity
Shape ID
.frame {
	clip-path: shape(from 25.76px 11.26px,curve to calc(1.72% + 28.97px) 14.5px with calc(0% + 30px) 1px,curve to calc(5.17% + 26.9px) 21px with calc(3.45% + 27.93px) 28px,curve to calc(8.62% + 24.83px) 9.5px with calc(6.9% + 25.86px) 14px,curve to calc(12.07% + 22.76px) 3.5px with calc(10.34% + 23.79px) 5px,curve to calc(15.52% + 20.69px) 14px with calc(13.79% + 21.72px) 2px,curve to calc(18.97% + 18.62px) 17px with calc(17.24% + 19.66px) 26px,curve to calc(22.41% + 16.55px) 13.5px with calc(20.69% + 17.59px) 8px,curve to calc(25.86% + 14.48px) 10.5px with calc(24.14% + 15.52px) 19px,curve to calc(29.31% + 12.41px) 3.5px with calc(27.59% + 13.45px) 2px,curve to calc(32.76% + 10.34px) 15.5px with calc(31.03% + 11.38px) 5px,curve to calc(36.21% + 8.28px) 18px with calc(34.48% + 9.31px) 26px,curve to calc(39.66% + 6.21px) 14px with calc(37.93% + 7.24px) 10px,curve to calc(43.1% + 4.14px) 14px with calc(41.38% + 5.17px) 18px,curve to calc(46.55% + 2.07px) 13.5px with calc(44.83% + 3.1px) 10px,curve to calc(50% + 0px) 13.5px with calc(48.28% + 1.03px) 17px,curve to calc(53.45% + -2.07px) 16.5px with calc(51.72% + -1.03px) 10px,curve to calc(56.9% + -4.14px) 23.5px with calc(55.17% + -3.1px) 23px,curve to calc(60.34% + -6.21px) 25.5px with calc(58.62% + -5.17px) 24px,curve to calc(63.79% + -8.28px) 27px with calc(62.07% + -7.24px) 27px,curve to calc(67.24% + -10.34px) 16px with calc(65.52% + -9.31px) 27px,curve to calc(70.69% + -12.41px) 6px with calc(68.97% + -11.38px) 5px,curve to calc(74.14% + -14.48px) 16px with calc(72.41% + -13.45px) 7px,curve to calc(77.59% + -16.55px) 25px with calc(75.86% + -15.52px) 25px,curve to calc(81.03% + -18.62px) 18px with calc(79.31% + -17.59px) 25px,curve to calc(84.48% + -20.69px) 16px with calc(82.76% + -19.66px) 11px,curve to calc(87.93% + -22.76px) 25.5px with calc(86.21% + -21.72px) 21px,curve to calc(91.38% + -24.83px) 26.5px with calc(89.66% + -23.79px) 30px,curve to calc(94.83% + -26.9px) 23px with calc(93.1% + -25.86px) 23px,curve to calc(98.28% + -28.97px) 18.5px with calc(96.55% + -27.93px) 23px,curve to calc(100% - 26.11px) 18.11px with calc(100% - 30px) 14px,curve to calc(100% - 14.11px) 26.11px with calc(100% - 22.22px) 22.22px,curve to calc(100% - 3.5px) calc(2.63% + 28.42px) with calc(100% - 6px) calc(0% + 30px),curve to calc(100% - 6.5px) calc(7.89% + 25.26px) with calc(100% - 1px) calc(5.26% + 26.84px),curve to calc(100% - 8px) calc(13.16% + 22.11px) with calc(100% - 12px) calc(10.53% + 23.68px),curve to calc(100% - 3.5px) calc(18.42% + 18.95px) with calc(100% - 4px) calc(15.79% + 20.53px),curve to calc(100% - 10.5px) calc(23.68% + 15.79px) with calc(100% - 3px) calc(21.05% + 17.37px),curve to calc(100% - 12px) calc(28.95% + 12.63px) with calc(100% - 18px) calc(26.32% + 14.21px),curve to calc(100% - 12.5px) calc(34.21% + 9.47px) with calc(100% - 6px) calc(31.58% + 11.05px),curve to calc(100% - 14px) calc(39.47% + 6.32px) with calc(100% - 19px) calc(36.84% + 7.89px),curve to calc(100% - 11px) calc(44.74% + 3.16px) with calc(100% - 9px) calc(42.11% + 4.74px),curve to calc(100% - 13px) calc(50% + 0.00px) with calc(100% - 13px) calc(47.37% + 1.58px),curve to calc(100% - 9px) calc(55.26% + -3.16px) with calc(100% - 13px) calc(52.63% + -1.58px),curve to calc(100% - 13.5px) calc(60.53% + -6.32px) with calc(100% - 5px) calc(57.89% + -4.74px),curve to calc(100% - 13.5px) calc(65.79% + -9.47px) with calc(100% - 22px) calc(63.16% + -7.89px),curve to calc(100% - 7px) calc(71.05% + -12.63px) with calc(100% - 5px) calc(68.42% + -11.05px),curve to calc(100% - 7.5px) calc(76.32% + -15.79px) with calc(100% - 9px) calc(73.68% + -14.21px),curve to calc(100% - 16px) calc(81.58% + -18.95px) with calc(100% - 6px) calc(78.95% + -17.37px),curve to calc(100% - 21.5px) calc(86.84% + -22.11px) with calc(100% - 26px) calc(84.21% + -20.53px),curve to calc(100% - 12px) calc(92.11% + -25.26px) with calc(100% - 17px) calc(89.47% + -23.68px),curve to calc(100% - 5.5px) calc(97.37% + -28.42px) with calc(100% - 7px) calc(94.74% + -26.84px),curve to calc(100% - 6.39px) calc(100% - 19.39px) with calc(100% - 4px) calc(100% - 30px),curve to calc(100% - 19.39px) calc(100% - 4.39px) with calc(100% - 8.79px) calc(100% - 8.79px),curve to calc(98.28% - 28.97px) calc(100% - 12px) with calc(100% - 30px) calc(100% - 0px),curve to calc(94.83% - 26.9px) calc(100% - 14px) with calc(96.55% - 27.93px) calc(100% - 24px),curve to calc(91.38% - 24.83px) calc(100% - 4.5px) with calc(93.1% - 25.86px) calc(100% - 4px),curve to calc(87.93% - 22.76px) calc(100% - 17.5px) with calc(89.66% - 23.79px) calc(100% - 5px),curve to calc(84.48% - 20.69px) calc(100% - 17.5px) with calc(86.21% - 21.72px) calc(100% - 30px),curve to calc(81.03% - 18.62px) calc(100% - 17px) with calc(82.76% - 19.66px) calc(100% - 5px),curve to calc(77.59% - 16.55px) calc(100% - 18px) with calc(79.31% - 17.59px) calc(100% - 29px),curve to calc(74.14% - 14.48px) calc(100% - 11.5px) with calc(75.86% - 15.52px) calc(100% - 7px),curve to calc(70.69% - 12.41px) calc(100% - 11.5px) with calc(72.41% - 13.45px) calc(100% - 16px),curve to calc(67.24% - 10.34px) calc(100% - 16.5px) with calc(68.97% - 11.38px) calc(100% - 7px),curve to calc(63.79% - 8.28px) calc(100% - 23px) with calc(65.52% - 9.31px) calc(100% - 26px),curve to calc(60.34% - 6.21px) calc(100% - 20.5px) with calc(62.07% - 7.24px) calc(100% - 20px),curve to calc(56.9% - 4.14px) calc(100% - 23px) with calc(58.62% - 5.17px) calc(100% - 21px),curve to calc(53.45% - 2.07px) calc(100% - 21.5px) with calc(55.17% - 3.1px) calc(100% - 25px),curve to calc(50% - 0px) calc(100% - 19.5px) with calc(51.72% - 1.03px) calc(100% - 18px),curve to calc(46.55% - -2.07px) calc(100% - 22.5px) with calc(48.28% - -1.03px) calc(100% - 21px),curve to calc(43.1% - -4.14px) calc(100% - 19.5px) with calc(44.83% - -3.1px) calc(100% - 24px),curve to calc(39.66% - -6.21px) calc(100% - 11px) with calc(41.38% - -5.17px) calc(100% - 15px),curve to calc(36.21% - -8.28px) calc(100% - 6px) with calc(37.93% - -7.24px) calc(100% - 7px),curve to calc(32.76% - -10.34px) calc(100% - 4px) with calc(34.48% - -9.31px) calc(100% - 5px),curve to calc(29.31% - -12.41px) calc(100% - 11.5px) with calc(31.03% - -11.38px) calc(100% - 3px),curve to calc(25.86% - -14.48px) calc(100% - 16px) with calc(27.59% - -13.45px) calc(100% - 20px),curve to calc(22.41% - -16.55px) calc(100% - 11.5px) with calc(24.14% - -15.52px) calc(100% - 12px),curve to calc(18.97% - -18.62px) calc(100% - 6.5px) with calc(20.69% - -17.59px) calc(100% - 11px),curve to calc(15.52% - -20.69px) calc(100% - 6px) with calc(17.24% - -19.66px) calc(100% - 2px),curve to calc(12.07% - -22.76px) calc(100% - 11.5px) with calc(13.79% - -21.72px) calc(100% - 10px),curve to calc(8.62% - -24.83px) calc(100% - 9.5px) with calc(10.34% - -23.79px) calc(100% - 13px),curve to calc(5.17% - -26.9px) calc(100% - 7px) with calc(6.9% - -25.86px) calc(100% - 6px),curve to calc(1.72% - -28.97px) calc(100% - 4.5px) with calc(3.45% - -27.93px) calc(100% - 8px),curve to 28.59px calc(100% - 14.09px) with 30px calc(100% - 1px),curve to 22.59px calc(100% - 28.59px) with 27.17px calc(100% - 27.17px),curve to 10px calc(97.37% - 28.42px) with 18px calc(100% - 30px),curve to 1.5px calc(92.11% - 25.26px) with 2px calc(94.74% - 26.84px),curve to 12.5px calc(86.84% - 22.11px) with 1px calc(89.47% - 23.68px),curve to 14.5px calc(81.58% - 18.95px) with 24px calc(84.21% - 20.53px),curve to 14px calc(76.32% - 15.79px) with 5px calc(78.95% - 17.37px),curve to 19.5px calc(71.05% - 12.63px) with 23px calc(73.68% - 14.21px),curve to 18px calc(65.79% - 9.47px) with 16px calc(68.42% - 11.05px),curve to 23px calc(60.53% - 6.32px) with 20px calc(63.16% - 7.89px),curve to 18.5px calc(55.26% - 3.16px) with 26px calc(57.89% - 4.74px),curve to 5.5px calc(50% - 0px) with 11px calc(52.63% - 1.58px),curve to 1px calc(44.74% - -3.16px) with 0px calc(47.37% - -1.58px),curve to 12.5px calc(39.47% - -6.32px) with 2px calc(42.11% - -4.74px),curve to 20px calc(34.21% - -9.47px) with 23px calc(36.84% - -7.89px),curve to 23.5px calc(28.95% - -12.63px) with 17px calc(31.58% - -11.05px),curve to 22px calc(23.68% - -15.79px) with 30px calc(26.32% - -14.21px),curve to 14px calc(18.42% - -18.95px) with 14px calc(21.05% - -17.37px),curve to 7.5px calc(13.16% - -22.11px) with 14px calc(15.79% - -20.53px),curve to 15px calc(7.89% - -25.26px) with 1px calc(10.53% - -23.68px),curve to 27.5px calc(2.63% - -28.42px) with 29px calc(5.26% - -26.84px),curve to 23.76px 25.76px with 26px 30px,curve to 25.76px 11.26px with 21.51px 21.51px);
}
Support This Project