How can I make a screen recording have a border radius in Webflow to achieve rounded edges on Safari?
To make a screen recording have a border radius in Webflow and achieve rounded edges on Safari, you can follow these steps:
Open Webflow Designer: Sign in to your Webflow account and open your project in the Webflow Designer.
Add a div block: Drag and drop a div block element onto your canvas. This will be the container for your screen recording.
Set dimensions and position: Adjust the dimensions and position of the div block to fit your screen recording. This can be done by using the Width, Height, and Position properties in the Styles panel.
Upload your screen recording: Upload your screen recording file to the Asset Manager in Webflow. You can do this by clicking on the "Assets" tab in the right sidebar and selecting the "+ Upload" button.
Add a video element: Drag and drop a video element into the div block. This element will be used to display your screen recording.
Set video source: Select the video element and go to the Settings panel. In the Video Source field, click on the "+" button and select the uploaded screen recording file from the Asset Manager.
Apply border radius: With the video element still selected, go to the Styles panel. In the Border Radius field, enter a value that represents the degree of rounding you want for the edges of your screen recording. For example, you can input "10px" for a small rounded effect or "50%" for a circular effect.
Preview and publish: Preview your changes in the Webflow Designer to see how the screen recording looks with rounded edges. Once you're satisfied, publish your site to see the changes live on the web.
By following these steps, you can easily achieve rounded edges on your screen recording in Webflow, specifically for Safari.
Additional Resources:
Q: Can I apply a different border radius to each individual corner of the screen recording in Webflow?
Q: How can I make the rounded edges of the screen recording change color on hover in Webflow?
Q: Is there a way to create a drop shadow effect around the rounded edges of a screen recording in Webflow?
