Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/border-bottom-left-radius below:

border-bottom-left-radius · WebPlatform Docs

Defines the shape of the border of the bottom-left corner.

Initial value

0

Applies to

All elements

Inherited

No

Media

visual

Computed value

two absolute <length> or percentages

Animatable

Yes

CSS Object Model Property

borderBottomLeftRadius

• border-bottom-left-radius: length
• border-bottom-left-radius: percentage

length

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS <length> data types. Negative values are invalid.

percentage

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

One value example to use an arc of circle as the border on the top left corner.

border-bottom-left-radius: 10px;


border-bottom-left-radius: 10px 10px;

Two value example to use an arc of ellipse as the border on the top left corner.

border-bottom-left-radius: 10px 5px;

One value percentage example on the top left corner. If the box is a square an arc of circle is used as the border, if the box is not a square an arc of ellipse is used as the border.

border-bottom-left-radius: 30%;

The border-bottom-left-radius property specifies the horizontal and vertical radii of the ellipse that defines the rounded lower-left corner of a border box. If there is only one value given, then that value specifies both horizontal and vertical radii of the ellipse. If there are two values given, then the first value sets the horizontal radius and the second value sets the vertical radius.

CSS Backgrounds and Borders Module Level 3: Rounded Corners:

Candidate Recommendation

• border

• border-bottom

• border-bottom-color

• border-bottom-left-radius

• border-bottom-style

• border-bottom-width

• border-color

• border-image

• border-image-outset

• border-image-repeat

• border-image-slice

• border-image-source

• border-image-width

• border-left

• border-left-color

• border-left-style

• border-left-width

• border-radius

• border-right

• border-right-color

• border-right-style

• border-right-width

• border-top

• border-top-color

• border-top-left-radius

• border-top-right-radius

• border-top-style

• border-top-width

• border-width

• CSSStyleDeclarationCSSStyleDeclaration
• currentStylecurrentStyle
• stylestyle
• defaultsdefaults
• runtimeStyleruntimeStyle
• Reference
• border-radiusborder-radius
• border-top-left-radiusborder-top-left-radius
• border-top-right-radiusborder-top-right-radius
• border-bottom-right-radiusborder-bottom-right-radius

• Mozilla Developer Network : [Border-bottom-left-radius Article]

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4