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.
Let's apply this property.
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.
To give a `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.
Support `fastn`!
Enjoying `fastn`? Please consider giving us a star ⭐️ on
[GitHub](https://github.com/fastn-stack/fastn) to show your support!
[⭐️](https://github.com/fastn-stack/fastn)
Getting Help
Have a question or need help?
Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a)
to get answers and subscribe to it to stay tuned.
Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your
thoughts, suggestion, question etc.
Connect with our [community](/community/)!
[💻️](/community/)
Found an issue?
If you find some issue, please visit our [GitHub
issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.
Quick links:
- [Install `fastn`](install/)
- [Create `fastn` package](create-fastn-package/)
- [Expander Crash Course](expander/)
- [Syntax Highlighting in Sublime Text](/sublime/)
Join us
We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) 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 - fastn.com
