border-bottom-left-radius в CSS


Содержание

�������� border-bottom-left-radius

�������� border-bottom-left-radius � ������ ������ ���������� ������ ������� ���� ��������.

���������� ��������

  • � ������ �������� ������� (�� ����� ���� �������������)
  • � �������� ������� � ���������.

���� ����������� ������ ������������� ������� ��������� ������. �������� �� ������� � ������ �� ��� �, � ����� ������� � ������ �� ��� �.

������������� ������

���� �������� ������� � ���������, �� �������� ������� �� ��� � ������������� � ��������� �� ������ �����, � �������� ������� �� ��� � � �� ������ �����.

�������� �� ���������
��������� �� ���� ���������, ����� ��������� ��������� ��� ������� �������� border-collapse ����� �������� �collapse�.
������������ ���
������ CSS CSS 3
�������������� ����������
  • Internet Explorer 9 � ����
  • Firefox 4 � ����
  • Opera 10.5 � ����
  • Safari 5 � ����
  • Chrome 5 � ����

������

���� ���:
���������:

�������

��� �������� ��������� � CSS3 ������ CSS Backgrounds and Borders Module Level 3 � ��������� � ������������ W3C � 17 ������� 2009 ����.

Safari 3-5 � Chrome 1-5 ������������ ����������� �������� -webkit-border-bottom-left-radius, � Firefox 1.0-4.0 -moz-border-radius-bottomleft, �� ��� �������� �� ��������� ������������� ������������. � ���������, -webkit-border-bottom-left-radius �� ������������ �������� ��������, �������� � ���������, � -moz-border-radius-bottomleft ������������ ������ �� ��� y � ��������� �� ������ �����, � �� �� ������, ��� � ������������. ����������� ������ ������������� ������� ����� ������ �������������� � Safari 3 � Chrome 1 � ���� � � Firefox 3.5 � ����.

CSS border-bottom-left-radius ��������

������

�������� ����������� ������� � ������ ����� ���� ���� ���������

#example1 <
border: 2px solid red;
border-bottom-left-radius: 25px;
>


#example2 <
border: 2px solid red;
border-bottom-left-radius: 50px 20px;
>

��������� ������� ����.

����������� � �������������

�������� border-bottom-left-radius ���������� ������ ������ ������� ����.

�����: ��� �������� ��������� ��������� ����������� ������� � ���������!

�������� �� ���������:
Inherited: no
Animatable: yes. ������� � animatable
Version: CSS3
��������� JavaScript: object.style.borderBottomLeftRadius=»25px»

��������� ��������

������ � ������� ��������� ������ ������ ��������, ������� ��������� ������������ ��������.

������ followed by -webkit- or -moz- ������ ������ ������, ������� �������� � ���������.

��������
border-bottom-left-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

��������� CSS

����������: ���� ������ ��� ��������, ������ ��� ������ �������, � ������ ��� ����� �������. ���� ������ �������� �������, ��� ���������� �� �������. ���� ����� �� ���� ����� ����, �� ���� ����� ��������, � �� �����������.

�������� �������

�������� ��������
length ���������� ����� ������� ������ ����. �������� �� ��������� � 0. ������ � �������� �����
% ���������� ����� ������� ������ ���� � %
initial ����������� ����� �������� �������� �� ���������. ������� � initial
inherit ��������� ��� �������� �� ������������� ��������. ������� � inherit

������ �������

������

�������� ����������� ������� � ����� ������ ���� � ���������:

CSS3 border-bottom-left-radius Property

Description

The border-bottom-left-radius CSS property sets the rounded shape for the ‘bottom-left’ corner of an element border box.

The following table summarizes the usages context and the version history of this property.


Default value:
Applies to: All elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: New in CSS3

Note: The border-bottom-left-radius property causes the element’s background to be rounded even if no borders have been defined or its value is set to none .

Syntax

The syntax of the property is given with:

[ length | percentage ] 1 or 2 values | initial | inherit

This shorthand notation can take one, or two whitespace separated values.

  • The optional second length values define the vertical radii for the bottom-left corner and the corner shape is thus a quarter ellipse.
  • If the second length is omitted, or it is equal to the first � the corner shape is a quarter circle. If either length is zero, the corner is square, not rounded.

The example below shows the border-bottom-left-radius property in action.

Example

  • div <
  • border : 2px solid #f08080 ;
  • border-bottom-left-radius : 20px ;
  • >

Property Values

The following table describes the values of this property.

Value Description
length A length value in px , pt , cm , em , etc. Negative values are not allowed.
percentage The size of the radius in percentage. In case of two values, percentage for the first value (i.e. horizontal radius) is calculated with respect to the width of the element’s box, while percentage for the second value (i.e. vertical radius) is calculated with respect to the height of the element’s box. Negative values are not allowed.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element border-bottom-left-radius property.
Илон Маск рекомендует:  Печать и отчеты

Browser Compatibility

The border-bottom-left-radius property is supported in all major modern browsers.


Basic Support�

  • Firefox 4+
  • Google Chrome 4+
  • Internet Explorer 9+
  • Apple Safari 5+
  • Opera 10.5+

Warning: Internet Explorer 8 and earlier versions do not support the border-bottom-left-radius CSS property. Supported in IE9 and above.

CSS �������� border-bottom-left-radius

�������� border-bottom-left-radius ������������� ����������� ����� ������ ������� ���� ��������.

�������� ��� ���� ����������: ���� ��� ������, ��� ��� ��������, ��� ������� ���� ����� ����������. ��� ������������� �������� ����������� ��� �����, ��� ����� ����� ������ ��������� �������� �������. ���� ������� ��������������� ��������� �������� background-clip.

CSS �������� border-bottom-left-radius ����� ��� ��������: ����� � �������.

��� ������� ������ ������ ��������, ��� ���������� � ��������������, � ������������ ������ �������. ���� ����� ��� ��������, ������ �� ��� ������������� �������������� ������, � ������ — ������������ ������.

������� ��� ��������������� ������� ��������� �� ������� �����, � ������� ��� ������������� ������� — �� ������ �����. ������������� �������� �����������.

How to change the bottom border radius?

So, i checked on googlehow to do it, some people tell me the code is:

ON CHROME* of course. well i tried and it seems that doesnt work. if you guys could help me, i’m here, waiting for your help! thanks :D

3 Answers 3

use border-bottom-left-radius and border-bottom-right-radius use border-top-left-radius and border-top-right-radius


Or use the shorthand notation, as describe at CSS3 border radius shorthand solution, for instance:

border-bottom-left-radius

The border-bottom-left-radius property is used to round the bottom left corner of an element.

The property takes in one or two values that define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge (see the diagram below). The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. Negative values are not allowed.

The two values of border-bottom-left-radius: 55pt 25pt define the curvature of the corner.

The curvature of the corner does not have to be perfectly circular. When only one value is specified and the other is copied from the one that is specified, the result will be a circular curve; i.e, an arc of a circle is used as a border.

Two equal radii will result in a circular curvature.

But when two values are specified and they are not equal, the result is an elliptical curve; i.e, an arc of an ellipse is used as a border.

Two non-equal radii will result in an elliptical curvature.

Trivia & Notes

If the element has a background color or a background image, the background will also be clipped to the border radius specified.

The element�s background image is clipped to the specified border radius.

However, sometimes the background color of an element may �leak� outside the curvature of the border when it is rounded. To fix that, you can use the background-clip property and set its value to padding-box .

If an element has a border image, the border image is not clipped to the curve of the rounded corners.

The content of the element may overflow the element on the corners that are rounded if the element does not have enough padding to �push� the content inwards. (See image below)

The element�s content may overflow it where the corners are rounded if it has no padding.

This example adds appropriate padding, so that the contents do not overflow the corners. Note that there is no border, but the background will still have rounded corners.

Also, The area outside the curve of the border edge does not accept pointer events on behalf of the element.

Official Syntax

  • Syntax:

  • Initial: 0
  • Applies To: all elements (but browsers are not required to apply to table and inline-table elements when border-collapse is collapse . The behavior on internal table elements is undefined for the moment.)
  • Animatable: yes, as two values of length, percentage, 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 calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • Values

    The unofficial syntax looks like this:

    Each of the radii can be a or

    Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. Negative values are not allowed.

    The question mark (?) indicates that the second radius� value is optional. If it is omitted, it is copied from the first one.

    entry for a list of possible values. See the entry for a list of possible values.

    CSS :: �������� border-bottom-left-radius

    css -�������� border-bottom-left-radius (�� ����. border bottom left radius � ������ ����� ������ �������) ������������ ��� ���������� ������� ������ ���� ��������. ��� ���� border-bottom-left-radius ����������� � ��� ���������� ������, � ���� ������ ���������� ���������� ���� ��������.

    ��������������

    • �������� �� ���������: 0 .
    • �����������: �� ���� ��������� , �� ����������� ������ � border-collapse: collapse .
    • �����������: ��� .
    • �����������: �� .

    • JavaScript: object.style.borderBottomLeftRadius=»value» .

    ���������

    ��������

    ����� ��������� � CSS ������� ��������� (��������), � ����� ��������, ������ ������� ������������ ������������ ������ �����.

    ���� ��������������� ���������� ������ �� �������, �������� ������� ���������� ����� ������ ����� ��� �������.

    border-radius

    �������� border radius CSS ������������ ��� ����������� ����� ��������. ��� ����������� ������ �������: border-top-left-radius , border-top-right-radius , border-bottom-right-radius � border-bottom-left-radius .

    ��� ����� ��������� �� ������ �� ������� �������� ��� ������ ��������, ����������� ����� ������ �/� , � ����� � �������� ���������� � ������ ������� �� ����� �����.

    1. ���� ����� ����� �� �������, �� �������� ����� ��������� ����, ���, ��� ��� ������ ��������.
    • ���� ������ ������ ��������, �� ��� ���������� ������� ������� �� ������� �����. �� ���� ������ �������� ����� ��������� x � y ������� �������� ������ ����, ����� �������, ��� ����� �������� ������. ������ �������� ������ ������� ��� �������� ������� ����, ������ � ���������� ������� ������� ������� ����, � ��������� � ������� ������;
    • ���� ������ ��� ��������, ������ ������������� ������ �������� ������ ����, ������ � ������ �������� ������� � ������ ������� �����, � ������ � ������� ������� ����;
    • ���� ������ ��� �������� CSS table border radius , ������ ���������� ������� ������ �������� � ������� ������� �����, � ������ � ������� �������� ������� � ������� ������ �����;
    • ���� ������ ���� ��������, �� ��� ������ ���������� ������� ������� �����.

    � ������ �� ������������� ���� �������, ����� �� ������������ ����� �����, ������ ���� �������� ����� ����������, � �� �������� ����� ��������� ������:

    1. ���� ����� ����� �������, �� �������� ����� ��������� �� ������ �������� � �� ������ �� ������� �������� � ������ ������� �� ����� �����.

    ��������, ��������� ����� ����� ������, ������ �������������� ������ �����. ��������, ��������� ����� ����� �����, ������ ������������ ������ ��������������� �����.


    � ���� ������ ���������� border radius CSS ���� �������� ����� ����������, � �� �������� ����� �������������:

    ����� ���������� � ����������

    ���� ������� ���������� ������� ���� ��� �����������, ��� ����� ����� ���������� ��������� �������� �������:

    �� ������ ���� ���� �������� ����� � ������������� � �� ������� �������, ����� ��� ����������. ����� ��������� ���, ����� ������������ �������� background-clip � ���������� ��� ���� �������� padding-box .

    ���� � �������� ���� ������� �����������, �� ��� �� ����������� ������ ������������ �����.

    ���������� �������� ����� �������� �� ��� ������� � �����, ������� ���� ����������, ���� ��� �������� �� ����������� �������� �������, �����������, ����� �������� ���������� ������:

    � ���� ������� moz border radius CSS ��������� �������, ����� ���������� �� �������� �� ������������ ���� �������. �������� ��������, ��� ���� ������� �� ������������, �� ��� ��� ����� ����� ����� ������������ ����.

    ����� ����� ������� ��� ������ ������� �� ��������� pointer events , ��������� � ������ ���������.

    ����� ������ ����� �� ������ ������������: ����� ����� �������� ����� ���� �������� ������ ��������� ������ �����, �������� ������ ��������������� ��������� ������������ �������� ���� �������� ������, ����� �� ���� �� ��� �� ������������.

    ���������� �������� �������� �������� ��� �������� ������� ��� ������������� ����. ������������� border radius CSS: 50% ���� ��������� ������� ����� ��������, � �������� ������ � ������ �����:

    ���� ������ � ������ �������� �� �����, �� ������� ������������� �����:

    ����������� ���������

    ��������� ��������: 0 0 0 0, ��� ������ ��������� �������� ������� �� ��������� �������.

    �����������: �� ���� ���������. �� �������� �� ����������� ������ ��������� ��� � ��������� table � inline-table , ����� ��� �������� border-collapse ������ �������� collapse . �� ������ ������ ��������� ���������� ��������� ������� �� ����������.

    �����������: ������ �� ������ ������� �����������, ��� ��� �������� �����, ���������� �������� ��� �������� calc() . ����� ��� �������� �������� �������, ��� ��������������� ��� �����. ����� ��� �������� �������� ����������, ��� ��������������� � ���������. ����� ��� �������� ������������� ��������� calc() .

    ��������

    ������������� ��������� webkit border radius CSS :

    � ����� ������� �������������� ���� (?) ��������, ��� �������� �������� ��������������. ���� �������� �������, ������� ���������� ���, ��� ������� ����.

    ������ ������ ����� ���������� ���������� ��� ��������� �����. ���������� ����������� ��� ��������������� ������� ��������� � ������ �����, ����� ��� ���������� ����������� ��� ������������� ������� ��������� � ������ �����. ������������� �������� �� �����������.

    ��������� ����������

    �������� CSS3 Border-radius (������������ ����)


    ����� ����������� �����. ���������� ��������� ������������ �������� border radius CSS , � ����� ������ ������� ( ��������, `border-top-left-radius` ).

    ������������ W3C

    �������������� �� ��������� ������:

    Chrome Firefox IE Opera Safari
    4 * 2 * 9 10 3.1 *
    iOS Safari Android Opera Mobile Android Chrome Android Firefox
    3.2 * 2.1 * 11 56 51

    * ��������� �������� ��������

    ������ ���������� ������������ ����� ������� ������ � border-radius � , �������������� ������� �������� ������� ��������-����������.��

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

    Обратите внимание: данное свойство поддерживается в IE9+, Chrome, Firefox, Opera и Safari.

    С помощью CSS3 свойства border-bottom-left-radius Вы можете сгладить нижний левый угол элемента.

    Величина сглаживания угла может быть указана в пикселях (px) или процентах (%).

    Border-bottom-left-radius � CSS

    ������������� �������� CSS3 border-raduis ��������� ����� ��������� ����������� ���� ��� ������������� ����������� ��� ������ div �����. ��� ���� �� ����������� � ����������� CSS3 �������.

    � ������� ������ � 2005 ����, �������� border radius ����� ������������ ����������� ��� ����������� �������� (���� � � ���������� �������������, � ������� ����� ������� ����). � ��-�� �������� ������������� ���-����������� ����� ��� ����� ��������� ������ ���������� � ����� ��������.

    ������� ������� ������:

    � ������, ��� ��� ������� ������� ����� �������:

    ������, �� �� ��� ������. ��� ������������� � Firefox, ����� ������������ ������� -moz- (�� ���� ����� ������ ��������� ���������, moz border radius):

    ��� ��� ��������

    ���������� ��� �������. ����������� ���� ����� ��������� ������������� ��� ������� ����, ��������� �������� border-*-radius (border-bottom-left-radius, border-top-left-radius, � �.�.), ���� ��������� ����� �������� �������� border-radius.

    ������� ��� ������ ���������� ��� ������������ �������� ��� �������� �������������� ����� border-*-radius, � ����� ������� �������� ������ border-radius.

    border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

    � �������� ������� ����� ������� ����� ��������� ��� CSS �������� (px, cm, in, em � ��.), � ����� �������� (� ���� ������ ������ ���������� ��������� �� ������ �����).

    � �������� ������� ����� ������� ����� ��������� ��� CSS �������� (px, cm, in, em � ��.), � ����� �������� (� ���� ������ ������ ���������� ��������� �� ������ �����).

    ���������:

    ������:

    �������������� ������ �������� ������������� ��� �������� �������������� ������, ������ �������� ��� ���� ������������� ������ �� �����������, � ������ � ������ �� ���������.

    ���� ������� ����� ���� ��������, �� ��� ���������� ��� �������������� ��� � ������������ ������.

    �� ������� ���������� ��������� �������� ������ �������� � ��������������� �� �����:

    ���� �����-���� �������� ����� ����� ����, �� ���� ����� ����������, � �� �������.

    border-radius

    border-radius ������� ��������, ������� ��������� ���������� ����������� ����� ���� �����. ����� ��������� ���� ��� ��� ������ ��������, ������ �� ������� ������� �� ������ �� ������� �������� �����, ��� ��������.

    ���������:

    ������:

    ������ ����� �������� (1-4) ���������� �������������� ������� ��� ���� ������ �����. ������������ ������ ����� ��������, �������� ����� �����, ���������� ������������ ������� ��� ���� ������ �����. ���� ������ ������ ���� ����� ��������, �� �� ������������ ��������� ��� ����������� ������������ � �������������� �����.

    ���� ������� ��� ������ ��������, �� ��� ������������ ����� ������� �����, ������� ������, ������ ������ � ������ ����� ������� ��������������. ���� ������ ������ �����, �� �� ��������� �������� ������� �������� ����. ���� ������ ������ ������, �� �� ��������� �������� ������ �������� ����. � ���� ������� ����� ���� ��������, �� ��� ������������ ��� ���� ������ �������� ������������.

    ��������� ���������

    � ��������� ����� Opera (������ 10,5 � ������), Safari (������ 5 � ������) Chrome (������ 5 � ������) ������������ ��� border-radius, ��� � �������������� �������� border-*-radius, ��������� � ������� ������������ W3C (���� ��� ���� ����� ������ ������ � ��������������, ����� ��� �������� ������� ��������, ������������� ��������� � ����� � �.�.).

    Mozilla Firefox (������ 1.0 � ������) ������������ �������� border-radius � ��������� -moz-, ���� � ���� ��������� ����������� ����� ����������� Mozilla � ������� ������������� W3C (�� ���� ����).

    ��������� ������ �������� Firefox �������� border-radius ��� �������� -moz-.

    Safari � Chrome (� ���-�� ������ ��������, ���������� �� ������ webkit) ������������ border-radius � ��������� -webkit- ������� � 3 ������ (� 5 ������ ������� ��� �� �����), �� ���-�� � ���������� ������������ �� ������� ������������.

    Internet Explorer 9 ��������� ���-�� ������������ �������� border radius.

    ������� -moz-

    ������� � 1-�� ������, ������� Mozilla Firefox ������������ �������� border-radius � ��������� -moz-. ������, ������� ������ ������� � ������ 3.5 ���� ������������ ������������� ����, �.�. ���� ��������� ��� �������� ��� ����, ���-�� ���������� ������������ � �������������� ������� ��������������. �� ������ 3.5 ������� ��������� ������ �� ������ �������� ��� ������� ����, � ���������� ���� ��������� ������������ � �������������� ������� ��� ���� ���������.

    ���������, ��� � �������� � ������ ������ ���������� ������� -moz-. �������� �������� ������ � ��������� ��������� ������ �������� border-*-radius, � ��������� -moz- �� �������� ������� �� �������:

    W3C Specification Mozilla Implementation
    border-top-left-radius -moz-border-radius-topleft
    border-top-right-radius -moz-border-radius-topright
    border-bottom-right-radius -moz-border-radius-bottomright
    border-bottom-left-radius -moz-border-radius-bottomleft

    ����� � �������������� ��������� ��� ���������� ��� �������� Mozilla ������� ����������. �� ���� ����� ��������� ��������� � ������ ������������� Mozilla �����.

    �����-���������� �������

    ��������� ������� ��������, ������� ������� �������� � ������� ������� Firefox, Safari/Chrome, Opera � IE9:

    Илон Маск рекомендует:  Сообщение об ошибке
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL