Как закруглить только верхние углы в css

Свойство border radius CSS используется для закругления углов элемента. Это сокращенная версия свойств: border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius .

Оно может принимать от одного до четырех значений или восемь значений, разделенных косой чертой «/» , с одним — четырьмя значениями с каждой стороны от косой черты.

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

Если задано четыре значения, то они определяют радиусы каждого из четырех углов. То есть первое значение будет указывать x и y радиуса верхнего левого угла, таким образом, это будет круговая кривая. Второе значение задает радиусы для верхнего правого угла, третье — определяет радиусы нижнего правого угла, а четвертое — нижнего левого;
Если задано три значения, первое устанавливает радиус верхнего левого угла, второе — радиус верхнего правого и левого нижнего углов, а третье — нижнего правого угла;
Если задано два значения CSS table border radius , первое определяет радиусы левого верхнего и правого нижнего углов, а второе — радиусы верхнего правого и нижнего левого углов;
Если задано одно значение, то оно задает одинаковые радиусы четырех углов.

В каждом из перечисленных выше случаев, когда не используется косая черта, четыре угла элемента будут закруглены, а их кривизна будет идеальным кругом:

Если косая черта указана, то свойство может принимать до восьми значений — от одного до четырех значений с каждой стороны от косой черты.

Значения, указанные перед косой чертой, задают горизонтальный радиус углов. Значения, указанные после косой черты, задают вертикальный радиус соответствующих углов.

В этом случае применения border radius CSS углы элемента будут закруглены, и их кривизна будет эллиптической:

Общая информация и примечания

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

Общая информация и примечания

Но иногда цвет фона элемента может « просачиваться » за пределы границы, когда она закруглена. Чтобы исправить это, можно использовать свойство background-clip и установить для него значение padding-box .

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

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

Общая информация и примечания - 2

В этом примере 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` ).

Закругление углов блока средствами HTML/CSS

От автора: Часто перед начинающим верстальщиком возникает ряд задач, которые ему нужно разрешить для выполнения верстки страницы. Одна из наиболее часто встречаемых проблем – это закругление углов блока средствами HTML/CSS.

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

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг 1

Создайте папку (например, folder) и поместите в ее директорию простую HTML страницу (например, index.html). Эта страница должна содержать следующий код:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Для того чтобы понять где, что и как, мы разберем код нашего файла index.html более подробно.

Итак, «xb1″,»xb2″,»xb3″,»xb4″,»xb5″,»xb6″,»xb7»- это блоки, при помощи которых и создаются наши закругленные углы. Данные блоки расположены горизонтально один под другим, как пешеходная зебра, к примеру. Т.е. вначале идет блок «xb1», затем блок «xb2», после этого блок «xb3″и так до блока «xb7» включительно. Все блоки отличны, либо равны, по своей ширине от блока «соседа» (в противном случае закругления углов блока у нас не было бы, в итоге мы получили бы обычный прямоугольник).

Блок «top_corners» — блок, в котором расположены блоки «xb1″,»xb2″,»xb3″,»xb4″,»xb5″,»xb6″,»xb7» в порядке возрастания. За счет данной последовательности («xb1″,»xb2″,…,»xb7») образуются верхние закругленные правый и левый углы нашего блока.

Блок «down_corners» — блок, в котором расположены блоки «xb7″,»xb6″,»xb5″,»xb4″,»xb3″,»xb2″,»xb1» в порядке убывания. Если придерживаться этой последовательности («xb7″,»xb6″,…,»xb1»,), то у нас образуются закругленные нижние правый и левый углы.

Т.о., мы создали все четыре закругленных угла блока (при помощи блоков «xb1″,»xb2″,…,»xb7″). Но у вас наверняка возникнет вопрос: » – Зачем нам блок «content»?». Данный блок является контентной частью нашего блока (блока с закругленными углами). Если в блоке должна располагаться какая-либо информация, то ее необходимо прописывать именно в рамках блока «content».

Теперь мы понимаем, что наш создаваемый блок с закругленными углами состоит из 3-х подблоков.

Также вашему вниманию хочу привести увеличенное изображение левого верхнего угла блока:

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

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

Последняя строчка для Оперы и ИЕ9.

Для решения этой проблемы можно воспользоваться css стилями.

Современный вариант для всех браузеров: border-radius: 5px;

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

Всего существует 3 варианта.

3-й: (самый старый способ)

Где классы имеют последовательное уменьшение отступов слевой и справой стороны.

сокращенный вариант border-radius: 10px 5px 4px 8px; углы начинаются от верхнего-левого/верхний-правый/нижний-правый/нижний-левый

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html html5 css или задайте свой вопрос.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Скругление углов CSS3

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

Backgrounds and Borders module на данный момент всё ещё остается черновым документом W3C, поэтому при именовании свойства border-radius браузеры используют вендорные префиксы:

-moz- используется в браузерах на основе движка Gecko (Firefox и SeaMonkey)
-webkit- в браузерах на основе одноименного движка (Safari и Chrome)

Браузер Opera обходится без вендорного префикса, ну а IE, оправдывая своё народное название «осла», вовсе не поддерживает данного свойства.

Скругление углов средствами CSS3. В данном примере не используется JS или картинки.

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

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

При указании двух или трех значений, пропущенные значения берутся из противоположных углов (top, right, bottom, left). Следующие примеры буду писать без вендорных префиксов, собственно подставить их не трудно.

C этим, полагаю разобрались, ничего сложного тут нет. Более интересная задача — скругление углов у изображений.

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

Берем любую картинку и пробуем в лоб применить к ней свойство border-radius.

Получили явно не то, что ожидали, бордюр со скруглением есть, а вот картинка как была, так и осталась.

Решение довольно простое — предлагаю использовать картинку в качестве фона элемента div.

Вот теперь получили желаемый результат — скругление работает. Смущает один момент, а именно необходимость вручную указывать размеры картинки.

Читать:

Для чего применяется метод nextset объекта курсора

Чтобы этого не делать, вставим внутрь нашего блока ту же картинку с указанием ей свойства visibility:hidden, т.е. сделаем её невидимой. В результате картинка будет распирать содержащий её контейнер и сама задаст необходимые размеры нашему блоку с бэкграундом.

И напоследок про костыли для IE. Даже это тупое животное можно научить закруглению углов, но тут не обойтись без сторонней библиотеки CSS3 Pie. Данная библиотека реализует многие CSS3 свойства в IE6-8, в том числе и border-radius (кстати, весит всего 28Кб). Для её подключения потребуется в CSS классу .img-radius добавить строчку:

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

Популярные движки для форумов Template CMS — легкая и шустрая CMS для сайта-визитки Если бы я знал это чуть раньше. Основные моменты и ошибки, связанные с индексированием сайтов. Эпический косяк в блоге и канонические url «Арабские» цифры или Почему арабы пишут буквы справа налево, а цифры — наоборот. Прием заявок на регистрацию в 160 новых доменных зонах открыт!

Похожие публикации:

Как один блок наложить на другой css
Как отзеркалить css
Сколько проработает arduino nano от 18650
Чем отличается css v34 от css v91

Как закруглить края кнопки в Qt Designer

введите сюда описание изображения

Не могу закруглить кнопку и поле ввода в Qt Designer. Уже пробовал записывать border-radius в файл стилей, но это не помогает а больше способов не знаю, через код это делать не хочется.

  MainWindow   0 0 800 600    0 0    800 600   Qt::NoContextMenu  false  Вычисление BMI     0 0 801 601     background.png     280 110 401 61    17   color: rgb(255, 255, 255);  Введите свой рост:     210 50 391 51    Myanmar Text 35 50 false false   color: rgb(255, 255, 255); font: 35pt "Myanmar Text";  Вычисление BMI     230 170 331 31   border-radius: 100;     280 240 401 61    17   color: rgb(255, 255, 255);  Введите свой вес:     230 300 331 31      290 370 211 41    14   PointingHandCursor  false  color: rgb(255, 255, 255); background-color: rgb(120, 183, 140); border-radius: 25px; border: 2px solid #094065;  Узнать BMI     230 460 331 31

Отслеживать

73.1k 107 107 золотых знаков 38 38 серебряных знаков 55 55 бронзовых знаков

Закругление углов блока средствами HTML/CSS

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг 1

Данный блок закруглен без использования картинок

Для того чтобы понять где, что и как, мы разберем код нашего файла index.html более подробно.

Теперь мы понимаем, что наш создаваемый блок с закругленными углами состоит из 3-х подблоков.

Также вашему вниманию хочу привести увеличенное изображение левого верхнего угла блока:

закругление улов в CSS

А также нижнего левого:

закругление улов в CSS

Шаг 2

После этого в папке folder мы создаем еще одну папку (например, style). Затем в нее мы помещаем файл-CSS (например, style.css), который должен содержать следующий код:

width : 100% ;
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 < display : block ; overflow : hidden ; .xb1, .xb2, .xb3, .xb4, .xb5, .xb6 < height : 1px ; margin : 0 8px ; background : #7f7f9c ; margin : 0 6px ; background : #7f7f9c ; margin : 0 4px ; background : #7f7f9c ; margin : 0 3px ; background : #7f7f9c ; margin : 0 2px ; background : #7f7f9c ; margin : 0 2px ; background : #7f7f9c ; margin : 0 1px ; background : #7f7f9c ; height : 2px ; display : block ; height : 100px ; background : #7f7f9c ; font-size : 2.5em ; color : #fc0 ; margin : 0 10px ; letter-spacing : 1px ; .top_corners < padding : 0 ; .down_corners < padding : 0 ;

Теперь мы подробно рассмотрим код файла style.css, т.к. именно тут задаются те параметры свойств, которые в совокупности и дали нам возможность закруглить углы блока.

Начнем со свойств display: block; и overflow: hidden;, которые заданы для блоков «xb1″,» xb2″,…,»xb7″. Эти свойства предназначены для того, чтобы блоки «xb1», «xb2″,…,»xb7» выстраивались друг за другом (блочное расположение).

Для каждого блока задан свой цвет (background: #7f7f9c;) и свой отступ при помощи свойства margin.

Разберем свойства блоков «xb1», «xb2″,…,»xb7» на примере блока «xb1»:

margin: 0 8px; — отступ блока слева и справа в 8 пикселов от блока «container». Значение «0» –это отсуп блока сверху и снизу относительно блока «container» (сверху) и блока «xb2» (снизу);

background: #7f7f9c; — цвет блока.

Аналогично и с блоками «xb2″,»xb3″,…,»xb7» (каждый имеет свой отступ). Можно сказать, что свойство margin в данной рассматриваемой теме является ключевым. Но не стоит забывать про свойство height, т.к. именно оно задает высоту блока (для блоков «xb1», «xb2″,…,»xb6» она равна 1 пиксель, для «xb7» – 2 пикселя ).

Рассмотрим свойства блока «content». Они такие же, как и у блоков «xb1», «xb2″,…,»xb7», но отличие есть только в величине высоты блока (она равна 100 пикселей). При помощи данного свойства мы можем увеличивать и уменьшать высоту блока с закругленными углами (об этом мы поговорим чуть позже).

У блока «container» есть всего лишь одно свойство width. Оно помогает нам задать ширину блока с закругленными углами. Изменения ширины блока за счет данного свойства будут рассмотрены ниже.

Блоки «top_corners» и » down_corners» являются вспомогательными. Функциональной нагрузки не несут. При желании их можно удалить – все останется на своих прежних местах. Они введены для более ясного представления кода.

После того, как выполнены пункты 1 и 2, в окне нашего браузера появился блок с закругленными углами:

закругление улов в CSS

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

Для этого нам необходимо ознакомиться более подробно с файлом style.css., а именно вот с этими элементами и их свойствами:

CSS скругление углов народными методами

CSS ugly, zakruglenie

Еще один пример скругления углов CSS методами:

Углы, скругленные CSS атрибутами

Блок будет иметь скругленные углы, если страницу рассматривать в браузерах Firefox, Chrome или Safari.

skruglennye ugly css

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

-moz-border-radius-bottomleft: 3px – скругление нижнего левого угла радиусом в 3 пикселя для браузеров Firefox.
-moz-border-radius-bottomright: 3px – скругление нижнего правого угла радиусом в 3 пикселя для браузеров Firefox.
-webkit-border-bottom-left-radius: 3px – скругление нижнего левого угла радиусом в 3 пикселя для браузеров Chrome.
-webkit-border-bottom-right-radius: 3px – скругление нижнего правого угла радиусом в 3 пикселя для браузеров Chrome.

В момент написания урока, скругление углов не поддерживают web-браузеры Internet Explorer и Opera. Как будут развиваться события дальше пока не известно. Прийдут ли разработчики браузеров к единодушному решению на предмет введения border-radius — остается вопросом.

Чтобы вы могли скруглить углы уже сегодня, я подготовил для вас два примера кросс-браузерных методов скругления углов с помощью изображения и CSS.

Внимание! 03 Августа 2011 – Все в порядке! События развились как надо! Смотрите CSS3 способы закруглить углы, которые поддерживают все браузеры!

Скругленные CSS углы для всех видов браузеров

или как скруглить углы с помощью изображения и CSS атрибутов

Помню, мне было нужно скруглить углы для блока меню. Первое, что я сделал — это создал в графическом редакторе Photoshop два небольших изображения:

CSS ugly

Добавил следующий код:

Углы, скругленные CSS методами с помощью изображения

Как закруглить только верхние углы в css

В результате у меня получился вот такой контейнер:

ugly CSS, primer skruglenija

Если к стилевым описаниям блока прибавить height:100px , получится вот что:

CSS углы или производим скругление

Кросс-браузерное скругление углов в CSS

или как скруглить углы с помощью изображения, таблицы и CSS атрибутов

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

Скругление углов с помощью изображения, таблицы и CSS

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

Автор проекта — Вася Митин | Дата публикации: Апрель 2010 | Обновление: Ноябрь 2018

CSS тень для текста Скругленные CSS углы Коллекция CSS меню

iOS Safari	Android	Opera Mobile	Android Chrome	Android Firefox
3.2 *	2.1 *	11	56	51