Rounded corners using border-radius
Video Title: How to add rounded corners
Owner: Ajit
Audience: Common
Goal: Make it easy to learn addingborder-radius propertyIntro Clip
Today we learn how to add the property
border-radius in fastnOn Text
We have a text here inside the container component column. border-width and
border-color and padding is already applied to this text.
border-radius we need to write border-radius.px followed by a
colon and give a pixel value.border-radius on text
Input
-- ftd.text: Hello
border-width.px: 2
border-color: red
border-radius.px: 10
Lang:
ftd
Output
Hello World
On container
Similarly, you can add border-radius to any container component.
We do the same thing. And it looks like this.
border-radius on container
Input
-- ftd.row:
width: fill-container
border-width.px: 2
border-color: red
spacing.fixed.px: 10
padding.px: 10
align-content: center
border-radius.px: 10
-- ftd.text: Hello
-- ftd.text: World
-- end: ftd.row
Lang:
ftd
Output
Hello
World
On Image
To the image, we do the same thing. And it looks like this.
border-radius on image
Input
-- ftd.image:
width.fixed.px: 400
src: $fastn-assets.files.planning.border-radius.ocean.jpg
border-radius.px: 15
Lang:
ftd
Output
Closing Remarks
Thank you guys, keep watching these videos to learn more about fastn.
Support us by giving a star on GitHub and connect our fastn community on
Discord.
Final Video
