Border radius с одной стороны: border-top-left-radius | htmlbook.ru — Вебджем.рф

Содержание

border-top-left-radius | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.5+	3.0+	1.0+	2.1+	1.0+

Краткая информация

Значение по умолчанию	0
Наследуется	Нет
Процентная запись	Да, относительно ширины блока
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/css3-background/#border-top-left-radius

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает радиус скругления левого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-top-left-radius: [значение | проценты] [значение | проценты]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др. ), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE htm>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-top-left-radius</title>
  <style>
   .title {
    background: #000080; /* Цвет фона */
    color: #ffe; /* Цвет текста */
    padding: 7px; /* Поля вокруг текста */ 
    border-top-left-radius: 10px; /* Левый верхний уголок */
    border-top-right-radius: 10px; /* Правый верхний уголок */
   }
   .content {
    border: 1px solid #000080;  /* Параметры рамки */
    background: #f0f0f0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */ 
    border-bottom-left-radius: 10px; /* Левый нижний уголок */
    border-bottom-right-radius: 10px; /* Правый нижний уголок */
   }
  </style>
 </head> 
 <body> 
  <div>Буквица</div>
   <div>
    Буквица является художественным приемом оформления текста и 
    представляет собой увеличенную первую букву, базовая линия 
    которой ниже на одну или несколько строк базовой линии 
    основного текста.
  
   </div>
 </body> 
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Радиус скругления в браузере Safari

Браузеры

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-topleft.

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-top-left-radius.

Скруглённые уголки

CSS по теме

border-top-left-radius

Статьи по теме

Рецепты CSS

свойство border-radius — учебник CSS

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

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

Закругление углов в CSS можно сделать для любого элемента HTML-страницы.

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

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


.borderElement {
  background-color: #EEDDFF;
  border: 6px solid #7922CC;
  border-radius: 25px;
}

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

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


.borderElement {
  background-color: #EEDDFF;
  border: 6px solid #7922CC;
  border-radius: 25px;
}

.
 borderElement1 {
  background-color: #FFE8DB;
  border: 6px solid #FF5A00;
  border-radius: 15px 100px 15px 100px;
}

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


.borderElement {
  background-color: #EEDDFF;
  border: 6px solid #7922CC;
  border-radius: 280px/100px;
}

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

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 поддерживается всеми современными версиями браузеров.

Далее в учебнике: свойство box-shadow — создаем тени для элементов.

Свойство CSS border-right

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

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

h2 {
правая граница: 5 пикселей сплошной красный цвет;
}

h3 {
граница справа: 4 пикселя с синими точками;
}

дел {
граница справа: двойная;
}

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

Определение и использование

Свойство border-right является сокращенным свойство для (в следующем порядке):

ширина правой границы
стиль границы справа (обязательно)
граница правого цвета

Если параметр border-right-color опущен, применяемый цвет будет цветом текст.

Показать демо ❯

Значение по умолчанию:	средний нет цветной
Унаследовано:	нет
Анимация:	да, см. индивидуальные свойства . Читать про анимированный Попробуй
Версия:	CSS1
Синтаксис JavaScript:	объект .style.borderRight=»5px с синими точками» Попробуй

Поддержка браузера

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

Собственность
граница правая	1,0	4,0	1,0	1,0	3,5

Синтаксис CSS

border-right: border-width border-style border-color |initial|inherit;

Значения свойств

Значение	Описание	Демонстрация
ширина границы справа	Обязательно. Определяет ширину правой границы. Значение по умолчанию «средний»	Демонстрация ❯
бордюр справа	Обязательно. Определяет стиль правой границы. Значение по умолчанию «нет»	Демонстрация ❯
граница правого цвета	Дополнительно. Определяет цвет правой границы. Значение по умолчанию цвет текста	Демонстрация ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник CSS: Граница CSS

Ссылка HTML DOM: свойство borderRight

❮ Предыдущая Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.

CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript

Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

9002 FORUM | О

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

Свойство CSS border-left-width

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Установите ширину левой границы:

div {граница-левая-ширина: тонкая;}

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

Ниже приведены дополнительные примеры из раздела «Попробуйте сами».

Определение и использование

Свойство border-left-width устанавливает ширину левой границы элемента.

Примечание: Всегда объявляйте стиль границы или свойство border-left-style перед граница слева ширина свойство. Элемент должен иметь границы, прежде чем вы сможете изменить ширину.

Показать демо ❯

Значение по умолчанию:	средний
Унаследовано:	нет
Анимация:	да. Читать про анимированный Попробуй
Версия:	CSS1
Синтаксис JavaScript:	объект .style.borderLeftWidth=»5px» Попробуй

Поддержка браузера

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

Собственность
граница слева ширина	1,0	4,0	1,0	1,0	3,5

Синтаксис CSS

Значения свойств

Значение	Описание	Демо
средний	Задает среднюю левую границу. Это по умолчанию	Демонстрация ❯
тонкий	Задает тонкую левую границу	Демонстрация ❯
толстый	Задает толстую левую границу	Демонстрация ❯
длина	Позволяет определить толщину левой границы. Читать о единицах длины	Демонстрация ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать	Примеры левая граница на толстую: div {граница-левая-ширина: толстая;} Попробуйте сами » Пример Установите ширину левой границы на 1 пиксель: div {border-left-width: 1px;} Попробуйте сами » Пример Установите ширину левой границы 15px: div {border-left-width: 15px;} Попробуйте это самостоятельно » Связанные страницы Учебник CSS: Граница CSS Ссылка CSS: свойство border-left Ссылка HTML DOM: свойство borderLeftWidth ❮ Назад Полное руководство по CSS Следующий ❯ ВЫБОР ЦВЕТА Лучшие учебники Учебник HTML Учебник CSS Учебник JavaScript How To Tutorial Учебник SQL Учебник Python Учебник W3. CSS Учебник Bootstrap Учебник PHP Учебник Java Учебник C++ Учебник jQuery 900 Справочник Справочник по HTML Справочник по CSS Справочник по JavaScript Справочник по SQL Справочник по Python Справочник по W3.CSS Справочник по Bootstrap Справочник по PHP Цвета HTML Справочник по Java Справочник по Angular Справочник по jQuery Основные примеры Примеры HTML Примеры CSS Примеры JavaScript Примеры инструкций Примеры SQL Примеры Python Примеры W3.CSS Примеры Bootstrap Примеры PHP Примеры Java Примеры XML Примеры jQuery 9002 FORUM \| О W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Навигация по записям Найти по тексту автора: Найти автора любого текста, опубликованного в Сети, просто. Копируете…: belenky — LiveJournal Компьютер и безопасность: Обеспечение безопасности вашего компьютера дома Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Рубрики Css Html Js Адаптивный сайт Верстка Идеи С чего начать Советы Шаблоны Разное © Компания Вебджем.рф 2009 - 2023 \| Все права защищены.

Border radius с одной стороны: border-top-left-radius | htmlbook.ru

border-top-left-radius | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Браузеры

CSS по теме

Статьи по теме

Статьи по теме

Рецепты CSS

свойство border-radius — учебник CSS

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

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

Свойство CSS border-right

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Значения свойств

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Основные примеры

Свойство CSS border-left-width

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Значения свойств

Пример

Пример

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Основные примеры

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

Рубрики