Smooth rounded corners (like iOS) for Vue.
This project was inspired by this Medium post which unfortunately—like most attempts—doesn't account for rectangles other than squares.
Installation and Use
Install the npm package
$ npm install vue-squircle
Import it into your Vue.js project
import VSquircle from "vue-squircle"; import Vue from "vue"; Vue.use(VSquircle);
And use it like this
<v-squircle radius="40px" smoothing="10" padding="20rem" background="red" > Your content goes here! </v-squircle>
When you use
<v-squircle> elements, you can use different props to change the look of your smooth rounded background.
paddingare Strings and their default value is
smoothingis a Number and the default value is
backgroundis a String and the default value is
hsla(0,0%,0%,0.5), but it could also be an image.
I will add background-blur filter options soon.