How to make rounded corners
Introduction
border-radius property rounds the corners of the border. It takes input of type ftd.length and is optional.
On 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
I hope you know now how to add
border-radius in fastn. Feel free to reach out and ask your doubts, if you have any.Getting Help
Have a question or need help?
Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.
Join our Discord channel and share your thoughts, suggestion, question etc.
Connect with our community!Found an issue?
If you find some issue, please visit our GitHub issues to tell us about it.
Quick links:
Join us
We welcome you to join our Discord community today.
We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.
Copyright © 2023 - FifthTry.com
