Свойство border-bottom-left-radius

New short-hand properties

The following syntax is now working in Firefox and Opera allowing you
to specify not only matching elliptical corners, but also different
elliptical corners in one shorthand property.

Here we’ve recreated two of the WebKit examples above using the new
syntax. You can see that the individual corner settings work exactly
the same now in Firefox as in WebKit, but for the short-hand property
you need to include a slash:

Example 8
Example 9

And now to the scary part.
Using the short-hand property, all values before the slash apply to the
horizontal radii and all values afterwards to the vertical. In this
example we’ve created a hybrid of the previous two examples.

Example 10

Here you can see what these
boxes look like in Firefox 3.5:

With all major browsers now using the same syntax, the
vendor-prefixes have been dropped and the standard seems to be set in
stone.

Browser compatibility

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0 -webkit 4.0	1.0 (1.0)-moz 4.0 (2.0)	9.0	10.5	3.0 (522)-webkit 5.0 (532.5)
Percentages	4.0	1.0 (1.0) 4.0 (2.0)	9.0	10.5	5.0 (532.5)
Elliptical corners	1.0	3.5 (1.9.1)	9.0	10.5	3.0 (522)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?
Percentages	?	(Yes)	?	?	?
Elliptical corners	?	(Yes)	?	?	?

The prefixed version (allowed from Firefox 1 to Firefox 12) of this property uses a different name, , than the final property as Mozilla implemented it before the final name was coined.

Before Firefox 4, the was relative to the width of the box even when specifying the radius for a height). This implied that was always drawing an arc of circle, and never an ellipse, when followed by a single value.

Prior to Gecko 50.0 (Firefox 50.0 / Thunderbird 50.0 / SeaMonkey 2.47), border styles of rounded corners were always rendered as if was . 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 prefixed version of the property for web compatibility reasons behind the preference , defaulting to . Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to .

Using -moz-border-radius in Mozilla (Firefox)

The following examples will only work if you’re using Firefox or
another Mozilla browser that supports -moz-border-radius
properties.

Example 1
Example 2
Example 3
Example 4

The Mozilla properties used
here do not conform to the standard (hence the -moz-
prefix) and until Firefox 3.5 only supported round corners. In newer
versions of Firefox elliptical corners are also possible.

As some people have pointed out these properties can be used not just
for ‘boxes’ but for many other HTML objects including form elements.

For those of you still seeing square corners, here’s a snapshot from
Firefox
showing the rounded corners effect:

There are a number of tricky JavaScript solutions that allow
border-radius and other CSS3 properties to be seen in Internet Explorer
and other browsers — but the overheads don’t really justify the
results.

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
	Chrome Full support 4 Full support 4 Full support 1 Prefixed’ Prefixed’ Implemented with the vendor prefix: -webkit-	Edge Full support 12 Full support 12 Full support 12 Prefixed’ Prefixed’ Implemented with the vendor prefix: -webkit-	Firefox Full support 4 Notes’ Full support 4 Notes’ Notes’ Prior to Firefox 50, border styles of rounded corners were always rendered as if was solid. This has been fixed in Firefox 50. Full support 49 Prefixed’ Prefixed’ Implemented with the vendor prefix: -webkit- Full support 44 Prefixed’ Disabled’ Prefixed’ Implemented with the vendor prefix: -webkit- Disabled’ From version 44: this feature is behind the preference (needs to be set to ). To change preferences in Firefox, visit about:config. No support 1 — 12 Alternate Name’ Alternate Name’ Uses the non-standard name:	IE Full support 9	Opera Full support 10.5 Full support 10.5 Full support 15 Prefixed’ Prefixed’ Implemented with the vendor prefix: -webkit-	Safari Full support 5 Full support 5 Full support 3 Prefixed’ Prefixed’ Implemented with the vendor prefix: -webkit-	WebView Android Full support ≤37 Full support ≤37 Full support ≤37 Prefixed’ Prefixed’ Implemented with the vendor prefix: -webkit-	Chrome Android Full support 18 Full support 18 Full support 18 Prefixed’ Prefixed’ Implemented with the vendor prefix: -webkit-	Firefox Android Full support 4 Notes’ Full support 4 Notes’ Notes’ Prior to Firefox 50, border styles of rounded corners were always rendered as if was solid. This has been fixed in Firefox 50. Full support 49 Prefixed’ Prefixed’ Implemented with the vendor prefix: -webkit- Full support 44 Prefixed’ Disabled’ Prefixed’ Implemented with the vendor prefix: -webkit- Disabled’ From version 44: this feature is behind the preference (needs to be set to ). To change preferences in Firefox, visit about:config. No support 4 — 14 Alternate Name’ Alternate Name’ Uses the non-standard name:	Opera Android Full support 11 Full support 11 Full support 14 Prefixed’ Prefixed’ Implemented with the vendor prefix: -webkit-	Safari iOS Full support 4.2 Full support 4.2 Full support 1 Prefixed’ Prefixed’ Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 1.0 Full support 1.0 Full support 1.0 Prefixed’ Prefixed’ Implemented with the vendor prefix: -webkit-
Elliptical corners	Chrome Full support 1	Edge Full support 12	Firefox Full support 3.5	IE Full support 9	Opera Full support 10.5	Safari Full support 3	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
Percentages	Chrome Full support 4	Edge Full support 12	Firefox Full support 4 Full support 4 Full support 1 Notes’ Notes’	IE Full support 9	Opera Full support 10.5	Safari Full support 5	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 4.2	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
See implementation notes.’: See implementation notes.
User must explicitly enable this feature.’: User must explicitly enable this feature.
Uses a non-standard name.’: Uses a non-standard name.
Requires a vendor prefix or different name for use.’: Requires a vendor prefix or different name for use.

Syntax

/* the corner is a circle */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;

/* Percentage values */

/* circle if box is a square or ellipse if box is a rectangle */
border-bottom-left-radius: 20%;

/* same as above: 20% of horizontal(width) and vertical(height) */
border-bottom-left-radius: 20% 20%;

/* 20% of horizontal(width) and 10% of vertical(height) */
border-bottom-left-radius: 20% 10%;

/* the corner is an ellipse */
/* border-bottom-left-radius: horizontal vertical */
border-bottom-left-radius: 0.5em 1em;

border-bottom-left-radius: inherit;

With one value:

the value is a or a denoting the radius of the circle to use for the border in that corner.

With two values:

the first value is a or a denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
the second value is a or a denoting the vertical semi-major axis of the ellipse to use for the border in that corner.

Values

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS data type. 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.

Шестиугольник

Код HTML. Для отображения шестиугольника создадим div с ID=”hexagon”.

1	<div id=»hexagon»><div>

Код CSS.

#hexagon {
margin: 40px 0;
width: 100px;
height: 55px;
background: #F1CCAE;
position: relative;
}
#hexagon:before,
#hexagon:after {
content: «»;
width: 0;
height: 0;
position: absolute;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#hexagon:before {
top: -25px;
border-bottom: 25px solid #F1CCAE;
}
#hexagon:after {
bottom: -25px;
border-top: 25px solid #F1CCAE;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#hexagon {

margin40px;

width100px;

height55px;

background#F1CCAE;

positionrelative;

}
#hexagon:before,
#hexagon:after {

content»»;

width;

height;

positionabsolute;

left;

border-left50pxsolid transparent;

border-right50pxsolid transparent;

}
#hexagon:before {

top-25px;

border-bottom25pxsolid#F1CCAE;

}
#hexagon:after {

bottom-25px;

border-top25pxsolid#F1CCAE;

}

Syntax



border-bottom-left-radius: 3px;



border-bottom-left-radius: .5em 1em;

border-bottom-left-radius: inherit;

where:

radius: Is a or a denoting the radius of the circle to use for the border in that corner.
horizontal: Is a or a denoting the horizontal semi-major axis of the ellipsis to use for the border in that corner.
vertical: Is a or a denoting the vertical semi-major axis of the ellipsis to use for the border in that corner.

Values

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 data types. Negative values are invalid.

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 axe refer to the width of the box, percentages for the vertical axe refer to the height of the box. Negative values are invalid.

Border Left

Border Left Property is a shorthand property. Border Left Property is used to apply color, width, style and radius to the Left side of border

Example 8 – Border Left Syntax

<!DOCTYPE html>
<html>
  <head>
    <style>
    .first
    {
        border-left-style: solid;
       	border-left-color: lime;
		border-left-width: 4px;
		border-bottom-left-radius: 17px;
		border-top-left-radius: 15px;
   }
    .second
    {
        border-left: 4px solid blue;
       	border-bottom-left-radius: 10px;
		border-top-left-radius: 15px;
    }
    </style>   
  </head>
  <body>
    <div>
        <p class="first">This is a solid  border of color lime .</p>
        <p class="second">This is also another solid border of color blue.</p>
    </div>
  </body>
</html>

The above syntax is used to apply shorthand property for left of border.

The second syntax shows another way of shorthand property where first value is for width, second value is for style, and third value is for color.

Summary

The CSS property sets the rounding of the bottom-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is no rounding is done and the corner is square.

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the property.

If the value of this property is not set in a shorthand property that is applied to the element after the CSS property, the value of this property is then reset to its initial value by the shorthand property.

Initial value
Applies to	all elements; but User Agents are not required to apply to and elements when is . The behavior on internal table elements is undefined for the moment.. It also applies to .
Inherited	no
Percentages	refer to the corresponding dimension of the border box
Media	visual
Computed value	two absolute s or s
Animatable	yes, as a , or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a function that is the sum of a length and a percentage (each possibly zero), and these functions have each half interpolated as real numbers.
Canonical order	the unique non-ambiguous order defined by the formal grammar

Browser Compatibility

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0 -webkit 4.0	1.0 (1.0)-moz 4.0 (2.0)	9.0	10.5	3.0 (522)-webkit 5.0 (532.5)
Percentages	4.0	1.0 (1.0) 4.0 (2.0)	9.0	10.5	5.0 (532.5)
Elliptical corners	1.0	3.5 (1.9.1)	9.0	10.5	3.0 (522)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?
Percentages	?	(Yes)	?	?	?
Elliptical corners	?	(Yes)	?	?	?

The prefixed version (allowed from Firefox 1 to Firefox 12) of this property uses a different name, , than the final property as Mozilla implemented it before the final name was coined.

Prior to Gecko 50.0 (Firefox 50.0 / Thunderbird 50.0 / SeaMonkey 2.47), border styles of rounded corners were always rendered as if was . This has been fixed in Gecko 50.0.