Css скругленные углы: Скруглённые уголки | htmlbook.ru

Разное 

Содержание

Как сделать закругленные углы css

Категория: Сайтостроение, Опубликовано: 2016-08-10
Автор:

Приветствую вас, дорогие читатели!

Сегодня я расскажу и покажу как сделать закруглённые углы при помощи css. Ещё совсем недавно закруглённые углы на сайтах делались исключительно при помощи картинок, то есть нужно было заранее подготовить картинку в фотошопе или другой аналогичной программе, закруглить для неё углы так как вам нужно, а потом разместить её на сайте.

Навигация по статье:

  • Как закруглить углы для блока?
  • Как закруглить углы картинки при помощи CSS?
  • Куда вставлять CSS код?
  • Как ещё можно закруглить углы при помощи CSS?

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

Причём вы можете закруглить углы как все сразу, так и только некоторые, да ещё и регулировать для них радиус закругления.

Как, например, здесь:

Круто, не правда ли?!
Всё это стало возможным благодаря CSS свойству border-radius.

Как закруглить углы для блока?

Предположим у вас на сайте есть блок с классом round-corner.

<div class=”round-corner”> </div>

<div class=”round-corner”>

</div>

Для того чтобы этот блок было лучше видно я задам ему высоту, ширину и цвет фона при помощи CSS.

.round-corner{ height:100px; width:200px; background:#2F73B6; }

.round-corner{

height:100px;

width:200px;

background:#2F73B6;

}

А теперь для того чтобы закруглить все углы этого блока нам достаточно приписать ему всего одну строку в CSS файле или прямо в коде страницы при помощи специальных тегов или атрибутов:

border-radius: 20px;

где 20рх – это радиус закругления угла (чем он больше – тем круглее угол)

Радиус закругления может задаваться как в пикселях, так и в процентах.

Например:

border-radius: 10%;

И вот что мы получим в итоге:

Сразу предупреждаю, что старые версии старые версии браузера Internet Explorer, а также некоторые мобильные браузеры не понимают этого CSS свойства и отображают углы незакруглёнными.

Как закруглить углы картинки при помощи CSS?

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

Для картинки CSS код будет выглядеть так:

.content img { border-radius: 20px; }

.content img {

border-radius: 20px;

}

Вот что получится:

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

Куда вставлять CSS код?

У вас есть аж целых 3 варианта как прописать данное CSS свойство и закруглить углы для элементов на вашем сайте:

  1. 1.Открываете CSS файл вашей темы или страницы и там в самом конце дописываете:

    .round-corner{ border-radius: 20px; }

    .round-corner{

    border-radius: 20px;

    }

    Где вместо «round-corner» будет название класса элемента, для которого вы хотите закруглить углы, а вместо 20px будет ваше значение.

  2. 2.Этот же код можно прописать прямо на странице вашего сайта, обернув его в тег style

    Выглядеть это будет так:

    <style> .round-corner{ border-radius: 20px; } </style>

    <style>

    .round-corner{

    border-radius: 20px;

    }

    </style>

  3. 3.Также CSS свойство для закругления углов можно приписать нужному элементу при помощи атрибута style.
    Для картинки это будет выглядеть так:

    <img src=”images/pic.png” style=” border-radius: 20px;”

    <img src=”images/pic.png” style=” border-radius: 20px;”

Первый вариант конечно предпочтительней, но если он вызывает у вас определённые трудности, то воспользуйтесь любым другим.

Как ещё можно закруглить углы при помощи CSS?

В примере выше я показала как закруглить сразу все 4 угла, но благодаря данному CSS свойству можно закруглять углы по отдельности и задавать им разный радиус закругления.
Для этого всего лишь нужно указать не одно, а четыре значения (для каждого угла своё)

  1. 1.На первом месте – левый-верхний угол
  2. 2.На втором – правый верхний угол
  3. 3.На третьем – правый нижний угол
  4. 4.На четвёртом – левый нижний

Задавая разные значения можно получить следующие варианты закругления углов:

Для этого нужно прописать:

border-radius: 0 80% 0 80%;

border-radius: 90% 100% 0 100%;

border-radius: 100% 100% 0 0;

border-radius: 100% 25% 25% 100%;

border-radius: 100%/50%;

border-radius: 100%;

Как видите всё просто! Надеюсь, что у вас не возникнет проблем с созданием закруглённых углов при помощи CSS!

Если статья была для вас полезной, то не забудьте поделиться ею в социальных сетях.

Для этого просто нажмите на кнопку одной из социальных сетей под этой статьей.

Если будут какие то вопросы – пишите их в комментариях. На этом сегодня всё! До встречи в следующих статьях 🙂

Как закруглить углы в CSS

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

По некоторым наблюдениям почти в 80% дизайнерских работ используются плавные линии. Закругленный угол тоже считается плавной линией. Получается, что визуальная мягкость и красота закругленного угла более востребована, нежели жесткость прямого угла, которая нужна лишь в определенных случаях.

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

Поэтому сегодня мы будем учиться закруглять углы при помощи CSS!

Для примера вот у нас есть такая кнопка:

Код кнопки (HTML):

<input type="button" value="Сообщение!"/>

Код кнопки (CSS):


.knopka
{
color:#cc0000;
font-size:50px;
padding:10px;
background-color:#fff;
border:1px solid #999;
}

Чтобы закруглить углы, пропишите в CSS «border-radius»:

border-radius: 20px;

готовый код:


<html>
<head>
<title>Заголовок страницы</title>
<style>
.knopka
{
color:#cc0000;
font-size:50px;
padding:10px;
background-color:#fff;
border:1px solid #999;
border-radius: 20px;
}
</style>
</head>
<body>
<input type="button" value="блог BlogGood.ru"/>
</body>
</html>

Результат будет таким:

Как видите, закруглились четыре угла на 20 px.

Если нужно закруглить, к примеру, только один, два или три угла, тогда нужно прописать к каждому углу параметры:

border-radius: 20px 20px 0 0;

Начинаете с левого верхнего угла и по часовой.

В результате вы увидите:

Закруглилось два верхних угла.

Если по каким-то причинам закругление не происходит, есть вероятность того, что ваш браузер ну очень сильно постарел…

Чтобы избежать такого, добавьте border-radius под популярные браузеры:


-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Google Chrome */
-khtml-border-radius: 10px; /* KHTML */
-o-border-radius: 10px; /* Opera */
-ms-border-radius: 10px; /* IE8 */
-icab-border-radius: 10px; /* Icab */
border-radius: 10px; /* CSS3 */

… и все заработает.

А сейчас парочка примеров того, что можно сотворить, используя закругление углов.

  • Закругленная кнопка
    Для CSS:
    
. knopka2
{
color:#fff;
padding:10px;
background-color:#008B00;
border:1px solid #999;
border-radius: 0 57px 0 57px;
}

    Для HTML:

    <input type="button" value="кнопка"/>

    Результат:

  • Закругление картинки
    <img src="https://bloggood.ru/wp-content/uploads/2013/03/Webmasterok2009_avatar-96x96.jpg">

    Результат:

  • Анимированное закругление картинки (смотрите тут)

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

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

Метки: css, для сайта, основы

CSS Закругленные границы

❮ Предыдущая Следующая ❯

CSS округлые границы

Собственность Border-Radius используется для добавления округлых границ к элементу:

Нормальная граница

Круглая граница

Круглая граница

Кружная граница

Пример

P {
  граница: 2 пикселя, сплошная красная;
  граница-радиус: 5px;
}

Попробуйте сами »

Дополнительные примеры

Все основные свойства границ в одном объявлении
В этом примере демонстрируется сокращенное свойство для установки всех свойств верхней границы в одном объявлении.

Установка стиля нижней границы
В этом примере показано, как задать стиль нижней границы.

Установка ширины левой границы
В этом примере показано, как установить ширину левой границы.

Установка цвета четырех границ
В этом примере показано, как установить цвет четырех границ. Может иметь от одного до четырех цветов.

Установка цвета правой границы
В этом примере показано, как установить цвет правой границы.

Проверьте себя с помощью упражнений

Упражнение:

Используйте сокращенное свойство border, чтобы установить «4px», «пунктирную», «красную» границу для элементов

.

<стиль>
п {
  : ;
}

<тело>
   
Это заголовок
 
  
Это абзац

  
Это абзац

Начать упражнение

Все свойства границ CSS

Свойство Описание
граница Задает все свойства границ в одном объявлении
нижняя граница Задает все свойства нижней границы в одном объявлении
цвет нижней границы Задает цвет нижней границы
нижняя граница стиля Устанавливает стиль нижней границы
ширина нижней границы Устанавливает ширину нижней границы
цвет рамки Задает цвет четырех границ
граница левая Задает все свойства левой границы в одном объявлении
граница левая Задает цвет левой границы
левый край Устанавливает стиль левой границы
граница слева Устанавливает ширину левой границы
радиус границы Устанавливает все четыре свойства border-*-radius для закругленных углов
граница правая Задает все свойства правой границы в одном объявлении
граница правого цвета Задает цвет правой границы
правая граница Устанавливает стиль правой границы
граница справа Устанавливает ширину правой границы
с каймой Устанавливает стиль четырех границ
верхняя граница Задает все свойства верхней границы в одном объявлении
цвет верхней границы Задает цвет верхней границы
бордюрный верх Устанавливает стиль верхней границы
ширина верхней границы Устанавливает ширину верхней границы
ширина границы Устанавливает ширину четырех границ

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

лучших примеров
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Как сделать закругленный угол с помощью CSS?

Обзор

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

  • Мы можем использовать свойство border-radius , чтобы добавить скругленные углы CSS к любому элементу.
  • Мы часто можем называть закругленные границы «удобными прямоугольниками», потому что они подразумевают комфорт, безопасность и надежность, которые улучшают взаимодействие с пользователем.
  • Чтобы добавить закругленные углы CSS к элементу, изображению или границе, мы можем использовать свойство border-radius и указать значение радиуса в пикселях, процентах или em.
  • Свойство border-radius может иметь от одного до четырех значений.
  • Мы можем независимо указать радиус границы для каждого угла, используя составные свойства, такие как граница-верхний-левый радиус , граница-нижняя-правая радиус и т. д.
  • Мы также можем использовать свойство border-radius для создания эллиптических границ.

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

Предварительные требования

Прежде чем продолжить, убедитесь, что вы понимаете основные принципы пограничной собственности.

Синтаксис 

 
 border-radius:

Свойство CSS border-radius — это сокращенное свойство, которое равномерно скругляет все углы элемента. Мы можем указать радиус границы в пикселях или процентах.

Возможные значения для закругленных углов

Значение Описание Пример
длина Мы можем использовать значения длины для указания радиуса. радиус границы: 10 пикселей;
проценты Мы можем использовать процентные значения для указания радиуса. радиус границы: 5% ;

Отрицательные значения недопустимы.

Стандартный

Для различных браузеров, включая Chrome и Firefox, мы можем определить закругленные углы CSS, используя свойство border-radius , добавив к свойству префикс -webkit и -moz. «-webKit» и «-moz» — это префиксы поставщиков в CSS, предлагаемые механизмами рендеринга Chrome и Firefox соответственно. Эти префиксы позволяют нам использовать функции CSS без внесения несоответствий.

Standard Эквивалент Mozilla Эквивалент Webkit
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;

Нам нужна только стандартизированная версия, так как все браузеры поддерживают официальный синтаксис CSS. Это не обязательно, но мы можем добавить к свойству префикс «-webKit» и «-moz», чтобы обеспечить полную поддержку устаревшего браузера.

Индивидуальные углы

Свойство border-radius — это сокращенное свойство, которое определяет радиус для всех углов элемента. Мы можем независимо указать радиус границы для каждого угла, используя следующие составляющие свойства:

Составляющая собственность Эквивалент Mozilla Эквивалент Webkit Описание Пример
220070 -moz-border-radius-topleft -webkit-border-top-left-radius Скругляет верхний левый угол элемента. граница-верхний-левый-радиус : 10px ;
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius Скругляет правый верхний угол элемента. граница-верхний-правый-радиус: 10px;
граница-нижняя-правая-радиус -moz-граница-радиус-нижняя правая -webkit-border-bottom-right-radius Скругляет нижний левый угол элемента. граница-нижний-правый-радиус:10px;
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius Скругляет нижний правый угол элемента. граница-нижний-левый-радиус: 10px;

Сокращенное свойство

  • Мы можем указать одиночное значение , если мы хотим равномерно скруглить углы.
 
 радиус границы: 10 пикселей;
  • Мы можем указать два значения . Первое значение задает верхний левый и нижний правый углы, а другое применяется к верхнему правому и нижнему левому углам.
 
 радиус границы: 10px 15px ;
/*граница-радиус: верхний левый и нижний правый верхний правый и нижний левый */
  • Мы можем указать три значения . Первое значение применяется к верхнему левому углу, второе значение — к верхнему правому и нижнему левому углам, а третье значение — к нижнему правому углу.
 
 радиус границы: 5px 10px 15px ;
/*граница-радиус: верхний левый верхний правый и нижний левый нижний правый */
  • Мы можем даже указать четыре значения . Первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, а четвертое значение применяется к нижнему левому углу.
 
 радиус границы: 5px 10px 15px 20px ;
/* радиус границы: верхний левый верхний правый нижний правый нижний левый */
  • Сокращенное свойство эквивалента Mozilla выглядит следующим образом:
 
 /* -moz-border-radius: [верхний левый] [верхний правый] [нижний правый] [нижний левый] */
-moz-border-radius: 5px 10px 15px 20px ;

Эллиптическое скругление

Могут быть ситуации, когда мы предпочитаем эллиптические углы полностью симметричным. Мы можем указать горизонтальный и вертикальный радиусы с косой чертой между ними, чтобы создать такие углы.

СИНТАКСИС 

 
 border-radius : радиус по горизонтали / радиус по вертикали

Пример 

 
 радиус границы: 50px/10px;
  • Одна пара значений горизонтального и вертикального радиусов скругляет все четыре угла.
  • Если нам нужна более сложная форма, мы можем использовать четыре значения для горизонтального и вертикального радиусов. Пример 
 
 радиус границы: 30px 20px 30px 20px/20px 30px 20px 30px;
/* border-radius : горизонтальный верхний левый горизонтальный верхний правый горизонтальный нижний правый горизонтальный нижний левый / вертикальный верхний левый вертикальный верхний правый вертикальный нижний правый вертикальный нижний левый */
}
  • Составляющие свойства остаются теми же для эллиптического округления. Мы можем указать радиус границы для каждого угла отдельно, используя значения, разделенные пробелом, а не разделенные косой чертой. Пример 
 
 граница-верхний-левый-радиус: 40px 20px; /* горизонтальный радиус, вертикальный радиус */
  граница-верхний-правый-радиус: 20px 40px;
  граница-нижний-правый-радиус: 40px 20px;
  граница-нижний-левый-радиус: 20px 40px;

Эллиптическое округление (Firefox 3.5+)

СИНТАКСИС

Нам нужен префикс -moz-, так как Mozilla Firefox 3.5 допускал только закругленные углы. Однако более поздние версии Firefox также позволяют использовать эллиптические углы.

 
 -moz-border-radius-topleft: [горизонтальный радиус] [вертикальный радиус];

Этот синтаксис также применяется к другим составляющим свойствам.

Пример 

 
 -moz-border-radius-topleft: 20px 40px;
-moz-border-radius-topright: 10px 30px;
-moz-border-radius-bottomleft: 20px 40px;
-moz-border-radius-topleft: 10px 30px;

Эллиптическое округление (Firefox 3.

5+)
  • Одна пара значений горизонтального и вертикального радиусов скругляет все четыре угла.
 
 -moz-border-radius: 10px/40px;
/* -moz-border-radius: горизонтальный радиус / вертикальный радиус */
  • Мы можем даже указать четыре значения для горизонтального и вертикального радиусов. Эти значения представляют верхний левый, верхний правый, нижний правый и нижний левый углы.
 
 -moz-border-radius: 10px 20px 30px 40px / 15px 30px 45px 60px;
/* -moz-border-radius : горизонтальный верхний левый горизонтальный верхний правый горизонтальный нижний правый горизонтальный нижний левый / вертикальный верхний левый вертикальный верхний правый вертикальный нижний правый вертикальный нижний левый */

Эллиптическое округление WebKit

  • Все углы Такие браузеры, как Chrome и Safari, поддерживают эллиптическое округление WebKit. Мы можем использовать следующее сокращенное свойство для эллиптического округления всех углов.

    СИНТАКСИС 

     
     -webkit-border-radius: [горизонтальный радиус] [вертикальный радиус];

    Пример 

     
     -webkit-border-radius: 32px 10px;

  • Только правые углы Чтобы эллиптически закруглить правые углы элементов, мы будем использовать следующий синтаксис: СИНТАКСИС 

     
     -webkit-border-top-right-radius: [горизонтальный радиус] [вертикальный радиус];
-webkit-border-bottom-right-radius: [горизонтальный радиус] [вертикальный радиус];

    Пример 

     
     -webkit-border-top-right-radius: 50px 30px;
-webkit-border-bottom-right-radius: 50px 30px;

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

Примеры

Пример 1. В этом примере описывается свойство Border-Radius для создания закругленных углов Css

HTML 

 
 

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

CSS 

 
 .container {
 граница: 8 пикселей, сплошной черный цвет;
 ширина: 350 пикселей;
 высота: 250 пикселей;
 цвет фона: голубой;
/* Равномерно скругляет все углы */
 радиус границы: 30px;
 поля:авто ;
  
}
.текст{
  размер шрифта: 25 пикселей;
  выравнивание текста: по центру;
}

Вывод

Пример 2. В этом примере описывается использование свойства Border-Bottom-Left-Radius

HTML 

 
 

  
 Скругление нижнего левого угла

CSS 

 
 .container {
 граница: 8 пикселей, сплошной черный цвет;
 ширина: 350 пикселей;
 высота: 250 пикселей;
 цвет фона: голубой;
/* Скругляет нижний левый угол */
 радиус нижнего левого края: 50 пикселей;
 поля:авто ;
  
}
.текст{
  размер шрифта: 25 пикселей;
  выравнивание текста: по центру;
}

Выход

Пример 3.

В этом примере описывается использование свойства Border-Top-Right-Radius

HTML 

 
 <дел>
  
 Скругление правого верхнего угла

CSS 

 
 .container {
 граница: 8 пикселей, сплошной черный цвет;
 ширина: 350 пикселей;
 высота: 250 пикселей;
 цвет фона: голубой;
/* Скругляет правый верхний угол */
 граница-верхний-правый-радиус: 50px;
 поля:авто ;
  
}
.текст{
  размер шрифта: 25 пикселей;
  выравнивание текста: по центру;
}

Выходные данные

Пример 4. В этом примере описывается использование свойства Border-Bottom-Right-Radius

HTML 

 
 

  
 Скругление нижнего правого угла

CSS 

 
 .container {
 граница: 8 пикселей, сплошной черный цвет;
 ширина: 350 пикселей;
 высота: 250 пикселей;
 цвет фона: голубой;
/* Скругляет правый нижний угол */
 граница-нижний-правый-радиус: 50px;
 поля:авто ;
  
}
. текст{
  размер шрифта: 25 пикселей;
  выравнивание текста: по центру;
}

Выход

Пример 5. В этом примере описывается использование свойства Border-Top-Left-Radius

HTML 

 
 

  
 Скругление верхнего левого угла

CSS 

 
 .container {
 граница: 8 пикселей, сплошной черный цвет;
 ширина: 350 пикселей;
 высота: 250 пикселей;
 цвет фона: голубой;
/* Скругляет верхний левый угол */
 граница-верхний-левый-радиус: 30px;
 поля:авто ;
  
}
.текст{
  размер шрифта: 25 пикселей;
  выравнивание текста: по центру;
}

Вывод

Пример 6. В этом примере описывается использование сокращенных свойств

HTML 

 
 

  
 Указание одного значения.

  
 радиус границы: 50 пикселей 



<дел>
  
 Указание двух значений. 

  
 радиус границы: 10px 15px ;
<дел>

Указание трех значений.

радиус границы: 50px 30px 90 пикселей;

<дел>

Указание четырех значений.

радиус границы: 20 пикселей 40 пикселей 60 пикселей 80 пикселей;

CSS 

 
 .container {
 граница: 8 пикселей, сплошной черный цвет;
 ширина: 350 пикселей;
 высота: 250 пикселей;
 цвет фона: голубой;
 поле: 15px авто;
}
.текст{
  размер шрифта: 25 пикселей;
  выравнивание текста: по центру;
}

/* использование одного значения */
.контейнер1{
  радиус границы: 50 пикселей;
}

/* Использование двух значений*/
.контейнер2{
  радиус границы: 60px 20px ;
/*граница-радиус: верхний левый и нижний правый верхний правый и нижний левый */
}
/* Использование трех значений */
 .контейнер3 {
    радиус границы: 50px 30px 90 пикселей;
   /*граница-радиус: верхний левый верхний правый и нижний левый нижний правый */
  }
/*Использование четырех значений */
.контейнер4{
   радиус границы: 20px 40px 60px 80px;
  /* радиус границы: верхний левый верхний правый нижний правый нижний левый */
}

Выход

Пример 7.

Мы можем научиться добавлять эллиптические углы с помощью этого примера

HTML 

 
 

  
 Добавление эллиптических углов.


 <дел>
 
 Использование составляющих свойств.

CSS 

 
 .container {
 граница: 8 пикселей, сплошной черный цвет;
 ширина: 350 пикселей;
 высота: 250 пикселей;
 цвет фона: голубой;
 поле: 10px авто ;
}
.контейнер1{
  радиус границы: 60 пикселей / 20 пикселей;
}
.контейнер2{
  граница-верхний-левый-радиус: 40px 20px; /* горизонтальный радиус, вертикальный радиус */
  граница-верхний-правый-радиус: 20px 40px;
  граница-нижний-правый-радиус: 40px 20px;
  граница-нижний-левый-радиус: 20px 40px;
}
.текст{
  размер шрифта: 25 пикселей;
  выравнивание текста: по центру;
}

Результат

Заключение

Автор записи

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

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