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.
