Как сделать круглую рамку в css

border-radius

CSS свойство border-radius позволяет сделать закруглённую рамку или скруглить углы элемента. Значение свойства определяет радиус окружности. При использовании свойства, вместо отрисовки обычных прямых углов элемента, будет использоваться закруглённая рамка с закруглёнными углами согласно дуге окружности с заданным радиусом:

Свойство border-radius может содержать от одного до четырёх значений, разделяемых между собой пробелами. От количества значений зависит то, как будут установлены радиусы скругления углов. Если указывается более одного значения, скругление углов устанавливается начиная с верхнего левого угла:

  • border-radius: 5px 10px 15px 20px; (4 значения)
    1. Верхний левый – 5px
    2. Верхний правый – 10px
    3. Нижний правый – 15px
    4. Нижний левый – 20px
    • border-radius: 10px 20px 15px; (3 значения)
      1. Верхний левый – 10px
      2. Верхний правый и нижний левый – 20px
      3. Нижний-правый – 15px
      • border-radius: 15px 5px; (2 значения)
        1. Верхний левый и нижний правый – 15px
        2. Верхний правый и нижний левый – 5px
        • border-radius: 13px; (1 значение)
          1. Радиус для всех четырёх углов – 13px

          Овальные скругления

          CSS свойство border-radius также позволяет сделать скругление углов ввиде дуги овала, а не круга:

          Чтобы определить овал используется комбинация из двух значений, между которыми ставится символ / :

          Значение, расположенное слева от слэша, определяет горизонтальный радиус, значение справа – вертикальный радиус.

          Каждая из двух частей (до слэша и после него) подчиняется тем же правилам, что и при создании круглых скруглений. Это означает, что каждая часть может содержать от одного до четырёх значений, разделяемых между собой пробелами. И от количества заданных значений будет зависеть то, как будут установлены радиусы скругления углов. Например, четыре значения перед символом / представляют горизонтальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Значения после символа / соответственно представляют вертикальные радиусы для тех же самых углов.

          Пример с овальными скруглениями:

          • border-radius: 55px 45px 40px / 35px 20px;
            1. Верхний левый – 55px / 35px
            2. Верхний правый и нижний левый – 45px / 20px
            3. Нижний правый – 40px / 35px

            Важно понимать, что форма элемента в любом случае остаётся прямоугольной. Поэтому, несмотря на то, что браузер отрисовывает закруглённые углы для элемента, содержимое элемента всё равно размещается в прямоугольной области и может выходить за границы скруглённых углов:

            Примечание: если у элемента нет рамки, то браузер будет производить скругление углов для фоновой области.

            Border-radius: закругленные углы в CSS

            В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color и border-style , с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.

            Как закруглить углы: свойство CSS3 border-radius

            Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).

            Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:

            Стиль, описанный выше, даст следующий результат на элементе <div> размером 200&#215;200 пикселей:

            Результат применения свойства border-radius

            Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:

            Разный радиус скругления с border-radius

            Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150&#215;450 пикселей:

            Эллиптические углы с border-radius

            Значения можно смешивать (т. е. использовать в одном стиле и обычное, и эллиптическое закругление), а также добавлять персональный стиль для каждого угла, используя соответствующие свойства:

            • border-top-left-radius — для верхнего левого угла;
            • border-top-right-radius — для верхнего правого угла;
            • border-bottom-left-radius — для нижнего левого угла;
            • border-bottom-right-radius — для нижнего правого угла.

            Принцип скругления углов

            На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px , — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px , закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px , а второе — длиной вертикальной полуоси — 20px :

            Свойство CSS border-radius поддерживается всеми современными версиями браузеров.

            Создаем закруглённые уголки с помощью CSS 3

            image

            Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.

            Кроссбраузерная совместимость.

            К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 1.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).

            Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.

            Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами. Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome.

            Для начала создадим простой блок, для которого мы и будем применять свойство border-radius.
            <body>
            <div ></div>
            </body>

            В CSS зададим для него высоту, ширину и цвет фона:
            #box <
            width:590px;
            height:100px;
            background-color:#6B86A6; >

            Добавляем свойство border-radius:

            Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:
            #box <
            -moz-border-radius: 20px;
            >

            Теперь все четыре угла будут иметь радиус 20px:
            image

            Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:
            #box <
            -moz-border-radius:20px 40px;
            >

            image

            Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.
            #box <
            -moz-border-radius:10px 20px 30px 40px;
            >

            image

            Объявляем свойство border-radius для каждого угла
            • moz-border-radius-topleft для верхнего левого угла;
            • moz-border-radius-topright для верхнего правго угла;
            • moz-border-radius-bottomright для нижнего правого угла;
            • moz-border-radius-bottomleft для нижнего левого угла;
            Горизонтальный и вертикальный радиус

            Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:
            #box <
            -moz-border-radius-topleft: 30px 15px;
            >
            image

            Как Вы можете видеть на картинке верхний левый угол имеет немного «скошенный» вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса.

            При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:
            #box <
            -moz-border-radius: 30px / 15px;
            >
            #box <
            -moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
            >

            image

            Использование свойства border-radius в Safari и Chrome.
            • -webkit-border-top-left-radius для верхнего левого угла;
            • -webkit-border-top-right-radius для верхнего правого угла;
            • -webkit-border-bottom-right-radius для нижнего правого угла;
            • -webkit-border-bottom-left-radius для нижнего левого угла;

            Этот код не будет работать в Safari и Chrome:
            #box <
            -webkit-border-radius: 10px 20px 30px 40px;
            >

            Правильный код будет выглядеть так:
            #box <
            -webkit-border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 20px;
            -webkit-border-bottom-right-radius: 30px;
            -webkit-border-bottom-left-radius: 40px;
            >

            Горизонтальный и вертикальный радиус в Safari и Chrome.

            В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:
            #box <
            -webkit-border-top-left-radius: 30px 15px;
            >

            При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:
            #box <
            -webkit-border-radius: 30px 15px;
            >

            Добавить комментарий

            Ваш адрес email не будет опубликован. Обязательные поля помечены *