safari video border radius

• CSS Tutorial
• CSS Exercises
• CSS Interview Questions
• CSS Selectors
• CSS Properties
• CSS Functions
• CSS Examples
• CSS Cheat Sheet
• CSS Templates
• CSS Frameworks
• CSS Formatter
• How to Add Video in HTML?
• How to add video in HTML5 ?
• How to add Label above Video in HTML5 ?
• How to display video controls in HTML5 ?
• How to Play a Small Clip from a Long Video in HTML5?
• How to Hide Full Screen Button of the Video Tag in HTML5 ?
• How to Generate Video from Images in HTML5 ?
• How to set the thumbnail image on video in HTML ?
• How to set the height and width of the video player in HTML5 ?
• How to play video on hover on a div using jQuery ?
• How to add Full Screen Background Video using Tailwind CSS ?
• HTML | <video> controls Attribute
• HTML | <video> loop Attribute
• How to Play Video on Mouse Hover and Pause on Mouseout using JavaScript ?
• How to make HTML5 Video Poster be same Size as Video Itself ?
• Design a YouTube Clone using HTML and CSS
• What are different video formats supported by browsers in HTML ?
• Design Video trailer Popup in HTML CSS & JavaScript
• HTML DOM Video width Property

How to add Rounded Corners on Video in HTML ?

Adding Rounded Corners to a video involves modifying the video frame’s corners to have a rounded appearance instead of sharp edges. Adding rounded corners to the video can ensure it fits seamlessly into the overall design.

Border-radius shorthand Property

To round the corners of the video, we have used the border-radius shorthand property. To achieve rounded corners for the <video> element, we set the border-radius to 10px. The border-radius property can be defined with one, two, three, or four values. It serves as a combination of four distinct properties: border-top-left-radius , border-top-right-radius , border-bottom-left-radius , and border-bottom-right-radius .

Example: Illustration of rounded corners on video using border-radius shorthand property.

CSS Property for each corner

Set the border-top-left-radius and border-bottom-right-radius properties to the <video> element. We can achieve the desired rounded effect for the corners of the <video> element. Unlike the border-radius shorthand, this method involves individually specifying the radius for the top-left and bottom-right corners.

Example: Illustration of rounded corners on video using Using border-top-left-radius and border-bottom-right-radius Property.

Please Login to comment...

Similar reads.

• CSS-Questions
• Geeks Premier League 2023
• Geeks Premier League
• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

• Skip to main content
• Select language
• Skip to search
• border-radius

Formal syntax

The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.

The radius applies to the whole background , even if the element has no border; the exact position of the clipping is defined by the background-clip property.

This property is a shorthand to set the four properties border-top-left-radius , border-top-right-radius , border-bottom-right-radius and border-bottom-left-radius .

The border-radius property does not apply to table elements when border-collapse is collapse .

The border-radius property is specified as:

• one, two, three, or four "><length> or "><percentage> values. This is used to set a single radius for the corners.
• followed optionally by "/" followed by one, two, three, or four <length> or <percentage> values. This is used to set an additional radius, so you can have elliptical corners.

For example:

where <length-percentage> = <length> | CSS data type represents a percentage value. Many CSS properties can take <percentage> values, often to define a size as relative to its parent object. Many CSS properties can use percentages, such as width, margin, padding, font-size, and many others."><percentage>

Live Samples

Sample 1 : http://jsfiddle.net/Tripad/qnGKj/2/

Sample 2 : http://jsfiddle.net/Tripad/qnGKj/3/

Sample 3 : http://jsfiddle.net/Tripad/qnGKj/4/

Sample 4 : http://jsfiddle.net/Tripad/qnGKj/5/

Sample 5 : http://jsfiddle.net/Tripad/qnGKj/6/

Specifications

Browser compatibility.

[1] In Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) -moz-border-radius was renamed to border-radius ; -moz-border-radius was supported as an alias until Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9). In order to conform to the CSS3 standard, Gecko 2.0 changes the handling of CSS data type represents a percentage value. Many CSS properties can take <percentage> values, often to define a size as relative to its parent object. Many CSS properties can use percentages, such as width, margin, padding, font-size, and many others."> <percentage> values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%; . Gecko 2.0 also makes rounded corners clip content and images (if overflow : visible is not set)

Support for the prefixed version ( -moz-border-radius ) was removed in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10).

[2] <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010 ).

[3] The implementation of <percentage> values was buggy in Opera prior to 11.50.

[4] <percentage> values are not supported in iOS versions prior to 5 and Android versions prior to WebKit 532.

[5] <percentage> values are implemented in a non-standard way prior to Gecko 2.0. Both horizontal and vertical radii were relative to the width of the border box.

[6] Safari and Chrome versions prior to WebKit 532.5 support only one value for all four corners. For different radii the border-top-left-radius long form properties must be used.

[7] Safari and Chrome versions prior to WebKit 532.5 don't support the slash / notation. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px; .

[8] In Opera prior to version 11.60, applying border-radius to replaced elements will not have rounded corners.

[9] Current Chrome and Safari versions ignore border-radius on element represents a control that provides a menu of options:"> <select> elements unless -webkit-appearance is overridden to an appropriate value.

[10] Prior to Gecko 50.0 (Firefox 50.0 / Thunderbird 50.0 / SeaMonkey 2.47), border styles of rounded corners (with border-radius ) were always rendered as if border-style was solid . This has been fixed in Gecko 50.0.

In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit , defaulting to false . Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true .

• Border-radius-related CSS properties: border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius

Document Tags and Contributors

• CSS Borders
• CSS Property
• NeedsMobileBrowserCompatibility
• CSS Reference
• CSS Background and Borders
• Border-image generator
• Border-radius generator
• Box-shadow generator
• Scaling background images
• Using CSS multiple backgrounds
• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• to use instead of the style of the border. If this property is set to none, the style defined by border-style is used instead."> border-image-source
• border-image-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width

Instantly share code, notes, and snippets.

ayamflow / gist:b602ab436ac9f05660d9c15190f4fd7b

• Download ZIP
• Star 446 You must be signed in to star a gist
• Fork 23 You must be signed in to fork a gist
• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.
• Learn more about clone URLs
• Save ayamflow/b602ab436ac9f05660d9c15190f4fd7b to your computer and use it in GitHub Desktop.

saulosilverio commented Jun 7, 2022

Sorry, something went wrong.

chetansanghani commented Jun 16, 2022

sjbur commented Jun 25, 2022

DevinXian commented Jul 21, 2022

fishnyc22 commented Aug 18, 2022

You sir, are like a wizard. Thank you.

DanielYankiver commented Sep 12, 2022

Works, great. Thank you!

satonin12 commented Sep 20, 2022

Working, thank you 🥇

leclercma commented Sep 22, 2022

Ulysseee commented Sep 23, 2022

thank's a lot it works perfectly fine, blows my mind

AmalJossy commented Sep 28, 2022

JoelEadeDesign commented Oct 18, 2022

flyneex commented Nov 3, 2022

Thx sir! I think what I doing wrong

kyrregjerstad commented Dec 16, 2022

Thanks, this issue was driving me crazy!

TobiasLauer commented Dec 21, 2022

MarcelKnobelsdorf commented Dec 21, 2022

christian-reichart commented Dec 22, 2022

Just-Hosam commented Dec 23, 2022

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

CodyWatters commented Jan 5, 2023

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ ❤️💙💙💙💙💙❤️❤️💙❤️❤️❤️💙❤️ ❤️❤️❤️💙❤️❤️❤️❤️❤️💙❤️💙❤️❤️ ❤️❤️❤️💙❤️❤️❤️❤️❤️❤️💙❤️❤️❤️ ❤️❤️❤️💙❤️❤️❤️❤️❤️💙❤️❤️❤️❤️ ❤️❤️❤️💙❤️❤️❤️❤️💙❤️❤️❤️❤️❤️ ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

ignmandagaran commented Jan 19, 2023

thiagorossener commented Jan 19, 2023

edwinork commented Jan 22, 2023

lukejans commented Jan 29, 2023

this solution seems to help to a degree. It makes the line slightly thinner but I'm still seeing a border with overflow hidden.

aliemre commented Feb 3, 2023

isaacs commented Feb 10, 2023

hyposlasher commented Feb 28, 2023

fgd007 commented Mar 23, 2023

How can I buy you a beer!?

Konglomneshued commented Jul 9, 2023

Thank you! Also works for me in Chrome.

umar-ibn-shafee commented Aug 25, 2023

Thanks a lot man...

l-portet commented Aug 25, 2023

Not all heroes wear capes

thebazel commented Sep 25, 2023 • edited

isolation: isolate; fixes this issue. isolation property works in all browsers. Demo: https://codepen.io/thebazel/pen/NWeYgRm

Force Safari to Respect Border Radius on Images & Videos

Description

Safari will often not respect border radiuses on images and videos. With this CSS code snippet you can force Safari to respect border radius on images and videos on your Webflow site.

Instructions

• Add CSS code snippet via an HTML embed or to the head section of your page custom code section.

Javascript snippet

Css snippet, html snippet.

Timothy Ricks

Snippet tags

Related code snippets.

Custom Diamond List Bullet Shape

Instead of the default circle for your Webflow list items this CSS snippet allows you to add a diamond as an alternative design.

SVG Clip-path for Custom Image Cropping

Create a responsive clip path for images using SVG shapes in Webflow.This allows you to create unique shaped images using SVG paths rather than DIVs or similar methods.

Prevent Input Zoom Scaling on Mobile

Prevent an input form zoom scaling on mobile on your Webflow site. This allows for a better user experience based on your sites design rather than mobile OS zoom default properties.

International Flags Phone Number Input

Add international flags to a phone number for input in Webflow. Adding this allows for a unique way of adding international flags to a phone form field in your Webflow site.

Truncate multi-line text with Ellipse

Do you want consistency with your Webflow designs? Truncate multi-line texts with ellipses based on 2 or 3 lines of your choosing via CSS. This helps keep your designs uniformed without needing to set max height limitations by truncating text that goes beyond a certain length.

Custom Select Styling Multi-Select Input

Design your own dropdowns and multi-select inputs in Webflow using Select2. With this Javascript code you'll be able to customize the look and design of the multi-select from the native browser select.

Single Line Truncate Text

Automatically truncate text that goes beyond a line on your Webflow site with this simple CSS script. This helps create uniformed design on your site by truncating text with ellipsis if they go beyond a single line.

Custom Slider Dot Color

Easily change the native Webflow slider element navigation/dot colors with this CSS snippet. This method allows you to easily select the colors of Webflow's native slider dots via a CSS code snippet.

More from author

Disable/Enable Clicking on Element

Control which elements can or cannot be clicked on your Webflow site with this simple CSS code snippet.

Play Background Video on Hover

Play a background video when a user hovers over the video on your Webflow site.

Split Text into Lines

Easily split text into lines based on lines, words, characters on your Webflow site. A great way to add interactions based on your own specifications to text on your Webflow site.

Change Active Webflow Tab

Change the default Webflow active tab on your Webflow site with this custom Javascript code.

Split CMS Collection into Multiple Sections

Split up your Webflow CMS collections into multiple sections with this Javascript code snippet. This allows you to easily break up a collection lists into multiple sections, a great way of adding your own elements in between a Webflow CMS collection list.

Number of CMS Item Count

A simple way of displaying the number of CMS items on a page in Webflow. If you ever wanted to add a CMS item count on a page this script will allow you to easily display the total number of items shown.

Staggered Interactions

Easily stagger your Webflow interactions via this Javascript code. Add staggered interactions to Webflow CMS items or interactions you may have already built without pulling your hair out. Adding this bit of Javascript code will help create staggered Webflow interactions.

CSS3 Border-radius (rounded corners)

Method of making the border corners round. Covers support for the shorthand border-radius as well as the long-hand properties (e.g. border-top-left-radius )

• 4 : Supported
• 5 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 12 - 123 : Supported
• 3.1 - 4 : Supported
• 5 : Supported
• 5.1 - 6.1 : Supported
• 7 - 17.3 : Supported
• 17.4 : Supported
• 17.5 - TP : Supported
• 2 : Partial support
• 3 - 3.6 : Supported
• 4 - 49 : Supported
• 50 - 124 : Supported
• 125 : Supported
• 126 - 128 : Supported
• 9 - 10.1 : Not supported
• 10.5 - 108 : Supported
• 109 : Supported
• 5.5 - 8 : Not supported
• 9 - 10 : Supported
• 11 : Supported

Chrome for Android

Safari on ios.

• 3.2 : Supported
• 4 - 17.3 : Supported
• 17.5 : Supported

Samsung Internet

• 4 - 23 : Supported
• 24 : Supported
• all : Not supported

Opera Mobile

• 10 : Not supported
• 11 - 12.1 : Supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 : Supported
• 2.2 - 4.4.4 : Supported

Firefox for Android

• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Supported
• 3 : Supported

Safari rounded outline issue

Hi guys! I have a problem with the outline in Safari. On my page in the form, I have an outline when you open the selector. This outline does not accept the rounded corners in safari. Can someone help me?

The link to the website: Website

hi @Noethi select border-radius: 2rem on selector__container if this doesn’t help (it should) you can add -webkit-border-radius: 2rem