Использование свойства border radius CSS для округления углов и создания разных фигур


Содержание материала:

border-radius

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

12.0+ 9.0+ 4.0+ 5.0+ 10.5+ 5.0+

Описание

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 также позволяет сделать скругление углов ввиде дуги овала, а не круга:

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

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

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

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

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

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

CSS3 закругленные углы, свойство border-radius

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

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

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

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

На практике же чаще всего используется другая конструкция:

Рассмотрим на примере объекта без использования выделенных границ (border)

Вначале делаем квадратный объект средствами CSS3. То есть создадим обьект:

Задаем для него стили:

#test <
background:#F00;
width:100px;
height:100px
>

Наш квадрат готов.

Теперь зададим свойства закругления. Для этого используем: border-radius

#test <
width:100px;
height:100px;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px
>

В результате получаем:

немного разберем код:
border-radius:6px — Свойство CSS3. Чем больше значение в пикселях, тем сильнее скруглённые углы;
-webkit-border-radius:6px — Хак для включения поддержки закругления в браузерах на основе webkit (Google Chrome и Safari).
Но стоит заметить, в последних версиях браузеров Chrome и Safari для поддержки border-radius не нужны никакие хаки.
-moz-border-radius:5px — Хак для включения поддержки закругления в браузере Firefox. Без него будет просто квадрат;

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

Допустим, вы хотите закруглить только нижние правый и левый угол.

Для этого изменим наш код:

#test <
width:100px;
height:100px;
border-radius: 0 0 6px 6px;
-moz-border-radius:0 0 6px 6px;
-khtml-border-radius: 0 0 6px 6px;
>

В результате получаем:

border-radius: 1 2 3 4;

1.Верхний левый угол;
2.Верхний правый угол;
3.Нижний правый угол;
4.Нижний левый угол;

Теперь поняв логику Вы можете делать скругленные углы так как Вам нужно.
Для обьекта же с границами в данный код необходимо добавить свойство для границы например:

border: 1px solid #E6B00F;

Общий код станет таким:

#test <
width:100px;
height:100px;
border: 1px solid #E6B00F;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px
>

В результате мы получим квадрат обведенный желтой сплошной линией со скругленными углами.
При этом надо обратить внимание, что если граница не solid, а dotted и dashed в местах закруглений
должны отображаться точками или пунктирными линиями соответственно.
Gecko-браузеры вообще не поддерживают точки и пунктир в дугах и отображают их сплошной линией.
Webkit-браузеры рисуют точки или пунктир, однако могут наблюдаться искажения.

Сделать изображение со скругленными углами CSS3 способами.
Цветовой фон и фон с изображениями обрезается по краям закруглений.
Если воспользоваться свойством overflow:hidden.
Однако это не все браузеры поддерживают.
Webkit поддерживает частично, Gecko, как и старые версии WebKit не поддерживают.

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

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

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

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

Простое скругление углов CSS

Если у вас появилась такая необходимость вы можете воспользоваться стандартным CSS-свойством border-radius. Например:

В данном случае для блока задается параметр для всех сторон.

Варианты скругления углов CSS

Так же, можно задавать радиус для каждого отдельного угла. Например:

Как видите, принцип задания параметров скругления такой же, как и у других свойств, работающих для разных сторон блока (margin, padding и т.д.). Параметры задаются по часовой стрелке, начиная с левого верхнего. Таким образом, получается, что мы задали скругление для левого верхнего угла 5px, для правого верхнего – 15px, для нижнего правого — 25px, и для нижнего левого 35px.

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

CSS border: radius, color, style и другие css свойства border

Я уверен, вы уже знакомы с css свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!

Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.

Основы использования css border

Наверняка, вы уже ознакомлены со стандартным использованием border свойства:

Код выше, выведет рамку в 1px, которая будет черного цвета. Легко и просто. Также можно немного расширить синтаксис:

Как дополнение, можно использовать специфические значения свойства border-width, три ключевых слова: thin, medium, thick.

Но использование расширенного синтаксиса не всегда практично. Давайте рассмотрим пример, когда нужно изменить цвет рамки блока, при наведении мыши. В таком случае использование сокращенного синтаксиса гораздо проще:

Более элегантно и проще можно сделать следующим образом:

Как видите, расширенная техника также полезна, когда мы меняем только некоторые свойства: width, style, color и другие.

Border-Radius

Border-radius – это «золотое» свойство CSS3 – первое, наиболее распространенное свойство, которое стало практичным и полезным. Исключая IE8 и версии ниже, все браузеры отображают закругленные уголки с помощью этого.

Хотя, необходимо использовать специальные префиксы для Webkit и Mozilla, чтобы стилизация была корректной.

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

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

В коде выше, устанавливая border-top-right-radius и border-bottom-left-radius на «нуль», можно добиться удивительных форм. Хотя элемент может наследовать некоторые свойства, которые нужно будет обнулить.

Наподобие как margin и padding, мы можем сжать синтаксис:

Как пример, применения свойства border-radius, покажу вам «лимон», который часто используют дизайнеры при верстке сайтов:

Идем далее основ

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

Сложные структуры css border

Существует множество техник для создания дизайна с применением сложных структур border. Для примера, разберем следующие…

Border-Style

Мы всегда используем наиболее известные свойства solid, dashed и dotted. Но существует парочка иных свойств border-style: groove и ridge.

Или в расширенном синтаксисе:

Хотя эти свойства и полезны, но они не являются основой создания сложных рамок.

Outline

Наиболее популярная техника создания двойной рамки – использование свойства outline.

Этот способ работает отлично, хотя, он нас ограничивает только двумя рамками. Иногда бывает нужно создать градиентный border, который состоит из многих слоев… как тогда?

Псевдоэлементы

Когда техники outline не достаточно, альтернативным средством является использование псевдо элементов :before и :after. С помощью которых можно добавить дополнительные рамки к элементу:

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

Box-Shadow

Интересным «детским способом» создания подобного эффекта, является использование CSS3 свойства box-shadow:

В этом случае мы были умнее, использовали специально предназначенное свойство box-shadow. Изменяя параметры x, y, blur на «нуль», мы можем использовать разные цвета для создания множества рамок.

Но есть проблемка, в старых браузерах, которые не понимают свойства box-shadow, будет видна только одна красная рамка в 5px.

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

Изменяем углы

В дополнение к используемому простому значению border-radius, мы можем указать два отдельных – разделяя их через / мы укажем горизонтальный и вертикальный радиус.

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

CSS формы, с использованием border

Эта техника показывает, как можно создавать css формы, при этом использовать элементы с нулевыми размерами высоты и ширины. Удивлены? Давайте посмотрим на примере…

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

…и следующий базовый стиль:

Наиболее частый пример использования CSS форм – создание обтекающей стрелки. Секрет этой стрелки кроется в создании border с разными цветами для каждой из сторон. Потом, ставим атрибуты width и height на 0.

Назначим к div блоку класс arrow:

Что бы продемонстрировать, сначала мы используем расширенный синтаксис. Далее мы можем убрать лишний код, используя сокращенный синтаксис:

Интересно, правда? Теперь мы установим прозрачные цвета на все стороны, кроме голубой стороны.

Отлично получилось! Но это противоречит семантической верстке, создавать .arrow div, только для того, чтобы добавить стрелочку на страницу. Для этой цели, мы можем использовать псевдоэлементы, что мы сейчас и сделаем.

Создаем Speech Bubble

Для создания Speech Bubble («Речевой хмарки»), нам понадобиться небольшой кусочек чистого CSS кода и один div блок.

Далее, добавим базовый стиль:

Далее, мы прилепим стрелочку с помощью after псевдоэлемента.

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

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

Когда мы создаем эту CSS форму, мы не можем конкретно указать размер стрелочки. Вместо этого мы можем установить свойство border-width, которое будет назначать размер для стрелочки. Также мы установим позицию стрелочки внизу посредине. Соответственно для этого используем значения top и left.

Кроме этого, нам остается придать цвет, такой же как у блока. Помните, при позиционировании, нужно учитывать размер других border, которые невидимы (15px). Также придадим блоку закругления по углам.

Не плохо, а? Используя несколько css классов и хитрости border, можно создать такую штуку.

Бонус! Вертикальное центрирование внутри блока

Для одной строки текста, можно использовать line-height. Но если у вас две или больше строк текста… Наилучшим решением будет установить display свойство на table, и поместить весь текст в параграф. Вот как это выглядит на html разметке:

Далее, придадим CSS стили:

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

Заключение

Теперь, вы знаете гораздо больше нежели использование стандартного синтаксиса border: 1px solid black. Как видите можно создать множество красивых эффектов и форм. Кто бы мог подумать, что с помощью обычного css border, можно создать такие крутые штуки? Если знаете еще крутые штучки, с использованием css свойств border, просьба поделиться со мной в комментариях. На этом все, творческих вам успехов!

Паруса Интернет – бизнеса

Все о заработке и бизнесе в Интернете, создании и продвижении сайтов, блогов, создании видео и презентаций

Закругление углов в CSS и HTML. Закругление углов картинок

В данной статье научимся самому простому и быстрому способу в прямоугольных формах закруглять углы с помощью CSS и HTML кодов и делать красивые формы картинок для сайта.

Очень часто веб-дизайнеры в своих работах изменяют формы геометрических фигур, картинок, фотографий и т.п., получая закругленные углы. Это придаёт проекту законченность и приятный дизайн.

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

1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей Style.css.

2. Закругление углов с помощью HTML кода без записи в файл стилей.

3. Картинки с закругленными углами. Рамка вокруг картинки HTML.

1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей Style.css

Рассмотрим первый способ получения прямоугольника с закругленными углами с помощью CSS и HTML кода с записью в файл стилей Style.css.

Что такое CSS

CSS – это Каскадная Таблица стилей (Cascading Style Sheets – CSS), использующая специальный код. С его помощью можно изменять шрифты, формы и цвета элементов, на страницах веб-приложений позиционировать элементы, включать фоновые изображения. CSS3 последняя версия данной разработки CSS.

Блоки, состоящие из CSS скриптов, размещаются в файле шаблонов стилей, шрифтов и цветов – Style.css для дальнейшего подключения их с помощью HTML-файлов (файлы с раширением .php) в различных местах сайта (шапка, контент, комментарии, подвал и сайдбар).

Работать с CSS и HTML кодами и файлами легко и доступно. Главное всё делать очень внимательно и не спеша.

Делаем прямоугольник с рамкой в CSS

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

Заходим в админпанель WorPress, отмечаем слева пункты меню Дизайн=>Редактор, открываем файл Style.css и в конец файла добавляем этот блок. Не забывайте нажимать Save (сохранить).

Код цвета задаётся в шестнадцатеричной системе и может состоять из шести знаков (это его полный код) или из трёх знаков (сокращённый код). Сокращать код цвета можно в случае совпадения первой цифры со второй, третьей с четвертой и пятой с шестой. Например, код #BB00CC можно сокращённо записать так #b0c. Буквы A, B, C, D и F в коде цвета использовать только латинские.

Значение 3px в атрибуте border показывает ширину рамки.

После занесения стилей в файл Style.css мы можем показывать наш прямоугольник в любом месте сайта. Для этого размещаем тег HTML кода в том месте, где должен появиться наш прямоугольник. Тег имеет такой вид:

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

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

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

Для закругления углов используется атрибут border-radius.

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

HTML-тег div выдаст нам прямоугольник в рамке с закругленными углами:

Как вставить в рамку текст

Для размещения в прямоугольнике текста необходимо в блок CSS добавить атрибут отступов текста от краёв padding, а HTML-тег будет содержать в себе нужный текст, например “pib9.ru”. Таким образом блок CSS имеет такой вид:

а HTML-тег для выдачи текста будет выглядеть так:

Получаем прямоугольник с закругленными углами и текстом:

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

В этом случае формы принимают размеры среды: длина соответствует ширине поля, а высота изменяется по мере наполнения формы содержимым.

Закругление выбранных углов

В описании стилей параметр 10px в атрибуте border-radius показывает радиус закругления, который можно изменять, подбирая нужный. Если задать 0, то закругление не произойдет. Этим свойством можно воспользоваться, когда необходимо сделать закругление выбранных углов.

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

Отсчет углов ведется по часовой стрелке, начиная с левого верхнего угла, т.е.:

1. Левый верхний угол.

2. Правый верхний угол.

3. Правый нижний угол.

4. Левый нижний угол.

Таким получается прямоугольник с выбранными закруглениями только в верхних углах.


2. Закругление углов с помощью HTML кода без записи в файл стилей

Рассмотрим второй способ получения прямоугольника с закругленными углами с помощью HTML кода без записи в файл стилей.

HTML закругленные углы

Есть одна небольшая фишка, которая ещё больше упрощает весь процесс – это HTML закругленные углы. Она заключается в формировании HTML кода, в котором прописываются те же стили, что и в кодах CSS. При этом используются те же атрибуты, что и в блоке CSS и отпадает необходимость записи блока в файл Style.css. Одним словом – заменяем полностью кодом HTML код CSS.

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

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

3. Картинки с закругленными углами. Рамка вокруг картинки HTML

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

Это делается очень просто, и сейчас мы этому научимся.

Расположим картинку на сайте, сделав её фоном для самой себя в качестве фона тега div. Получаем такой код и картинку:

В атрибуте url(‘ ‘) вставляете ссылку на свою картинку.

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

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

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

Обратите внимание, что часть атрибутов можно заносить в файл стилей, а часть в тег div. В нашем случае размеры картинки width и height вставлены в HTML-код.

Код HTML второго способа без использования файла стилей, описанного в данной статье, имеет такой вид:

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

Закругление выбранных углов картинки

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

Ссылку на картинку и размеры можно брать в админпанели: Медиафайлы=>Библиотека и возле выбранной картинки нажать: Редактировать.

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

Свойство border-radius CSS3 и border-collapse: collapse не смешиваются. Как использовать border-radius для создания свернутой таблицы со скругленными углами?

Edit-Оригинальное Название: есть ли альтернативный способ достижения border-collapse:collapse на CSS (для того, чтобы иметь свернутый, закругленный угловой стол)?

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

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

вот в чем проблема. Я также хочу установить border-collapse:collapse собственность, и когда это установлено border-radius больше не работает. Есть ли CSS-способ, которым я могу получить тот же эффект, что и border-collapse:collapse фактически не используя его?

изменения:

я сделал простую страницу, чтобы продемонстрировать проблему здесь (только Firefox / Safari).

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

резюме предлагаемой решения:

окружать таблицу с другим элементом с круглыми углами не работает потому что углы таблицы квадратные «кровоточат до конца.»

указание ширины границы в 0 не приводит к свертыванию таблицы.

дно td углы по-прежнему квадратные после установки cellspacing на ноль.

использование JavaScript вместо-работает, избегая проблемы.

возможные решения:

таблицы генерируются в PHP, поэтому я мог бы просто применить другой класс к каждому из внешних th / tds и стиль каждого угла отдельно. Я бы предпочел не делать этого, так как это не очень элегантно и немного больно применять к нескольким таблицам, поэтому, пожалуйста, продолжайте предложения.

возможное решение 2-использовать JavaScript (в частности, jQuery) для стилизации углов. Это решение также работает, но все еще не совсем то, что я ищу (я знаю, что я придирчивый). У меня две оговорки.:

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

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

21 ответов

я понял. Вам просто нужно использовать некоторые специальные селекторы.

проблема с округлением углов таблицы заключалась в том, что элементы td также не стали закругленными. Вы можете решить это, сделав что-то вроде этого:

Теперь все раунды правильно, за исключением того, что все еще есть проблема border-collapse: collapse ломая все. Только установил cellspacing=»0″ в html вместо этого (спасибо,Джоул).

следующий метод работает (проверено в Chrome) с помощью box-shadow С распространением 1px вместо «реальной» границы.

если вы хотите решение только для CSS (не нужно устанавливать cellspacing=0 в HTML), что позволяет для границ 1px (что вы не можете сделать с border-spacing: 0 решение), я предпочитаю делать следующее:

  • поставил border-right и border-bottom для ячейки таблицы ( td и th )
  • дайте клетки в первая строка a border-top
  • дайте клетки в первый столбец a border-left
  • С помощью first-child и last-child селекторы, вокруг соответствующих углов для ячеек таблицы в четырех углах.

учитывая следующий HTML:

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

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

Как сказал Ян, решение состоит в том, чтобы вложить таблицу в div и установить ее так:

С overflow:hidden , квадратные углы не будут кровоточить через div.

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

а затем, чтобы получить границу на дно и обратно

:last-child недопустимо в ie6, но если вы используете border-radius Я полагаю, вам все равно.

EDIT:

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

толстые серые границы, которые вы видите на самом деле фон таблицы (вы можете видеть это ясно, если вы измените цвет рамки на красный). Если вы установите cellspacing в ноль (или эквивалентно: td, th < margin:0; >) серые «границы» исчезнут.

EDIT 2:

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

я попробовал обходной путь, используя псевдо-элементы :before и :after на thead th:first-child и thead th:last-child

в комбинации с оборачивать таблицу с

работает для меня в chrome (13.0.782.215) Дайте мне знать, если это работает для вас в других браузерах.

у меня была та же проблема. удалить border-collapse полностью и использовать: cellspacing=»0″ cellpadding=»0″ в HTML-документе. пример:

ответы только тогда, когда нет границ вокруг стола, что очень ограничивает!

у меня есть макрос в SASS для этого, который полностью поддерживает внешний и внутренние границы, достижение того же стиля, что и border-collapse: collapse без фактического указания его.

протестировано в FF/IE8/Safari / Chrome.

дает хорошие округленные границы в чистом CSS во всех браузерах, но IE8 (деградирует изящно), так как IE8 не поддерживает границы-радиус 🙁

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

этот ответ не самый короткий, но он работает.

, чтобы применить этот стиль просто изменить свой

тег следующим образом:

и обязательно включите вышеупомянутые стили CSS в свой HTML.

надеюсь, что это помогает.

для граничной и прокручиваемой таблицы используйте это (замените переменные, $ начиная с текстов)

если вы используете thead , tfoot или th , просто заменить tr:first-child и tr-last-child и td С ними.

Я только что написал сумасшедший набор CSS для этого, который, кажется, работает отлично:

на самом деле вы можете добавить ваш table внутри div в качестве обертки. а затем назначьте эти CSS коды для обертки:

решение с border-collapse: отдельно для таблицы и отображения: inline-table для tbody и thead.

Я новичок в HTML и CSS, и я также искал решение для этого, вот что я нахожу.

Я пробую, угадайте, что он работает:)

нашел этот ответ после запуска той же проблемы, но обнаружил, что это довольно просто: просто дайте переполнение таблицы: hidden

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

я начал эксперимент с «дисплеем», и я обнаружил, что: border-radius , border , margin , padding , в table отображаются с:

но нам нужно установить width каждой колонки

вот недавний пример того, как реализовать таблицу с закругленными углами изhttp://medialoot.com/preview/css-ui-kit/demo.html. Он основан на специальных селекторах, предложенных Джоэлом Поттером выше. Как вы можете видеть, он также включает в себя некоторую магию, чтобы сделать IE немного счастливым. Он включает в себя некоторые дополнительные стили, чтобы чередовать цвет строк:

таблица с округленными углами и с граничными клетками. Используя @Ramon Tayag решение.

ключ должен использовать border-spacing: 0 как он указывает.

решение с помощью SCSS.

Border-radius теперь официально поддерживается. Таким образом, во всех приведенных выше примерах вы можете удалить префикс «-moz -«.

еще один трюк-использовать тот же цвет для верхних и нижних строк, что и ваша граница. Все 3 цвета, он сливается и выглядит как идеально круглый стол, Даже если не физически.

CSS: интересные возможности border-radius

Что можно сделать с помощью CSS-свойства border-radius ? Автор материала, говорит, что больше, чем кажется на первый взгляд. В частности, речь идёт о том, что углы элементов, скруглённые с помощью этого свойства, могут иметь весьма интересную форму.

Предлагаем поговорить о тонкостях использования border-radius .

Старые свойства и современный веб-дизайн

В этом году, на Frontend Conference Zurich, Рэйчел Эндрю сделала доклад о возможностях технологии CSS Gr >border-radius . Не забывайте о том, что старый CSS всё ещё существует и всё ещё может приносить пользу. Вам не обязательно всегда пользоваться чем-то совершенно новым для создания каких-либо эффектов».

Через некоторое время после этого выступления мне в голову пришла мысль о том, что круг — это лишь малая часть того, что можно сделать с помощью border-radius . Увлечённый этой идеей, я решил как следует разобраться с этим свойством.

Освоение border-radius

Единственное значение

Начнём с основ. Надеюсь, вы на этом примере не заскучаете. Вы, возможно, знакомы с CSS, да и со свойством border-radius — тоже. Оно существует уже довольно давно, и пользуются им, в основном, указывая единственное значение. Выглядит это так: border-radius: 1em . Возможно, это было одной из самых обсуждаемых возможностей CSS3 в 2010-м, когда лучшим другом дизайнера был сайт css3please.com.

При использовании единственного значения для border-radius углы элемента скругляются в соответствии с этим значением.

Как видно из вышеприведённого примера, задавать фиксированные значения можно не только указывая после чисел некие единицы измерения, вроде px , rem или em , но и знак процента. Обычно это используется для создания кругов на основе квадратов, когда border-radius устанавливают в 50%. Процентное значение основано на ширине и высоте элемента. Поэтому, когда его применяют к прямоугольникам, получившиеся углы симметричными не будут. Вот пример, демонстрирующий разницу между свойствами border-radius: 110px и border-radius: 30% , применёнными к прямоугольнику.

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

Четыре отдельных значения

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

Восемь значений, разделённых косой чертой

Думаю, многие из вас уже попробовали всё, о чём мы говорили выше. Теперь настало время для по-настоящему интересных экспериментов. Что произойдёт, если значения разделить с помощью косой черты и указать до восьми таких значений? Для начала взглянем на спецификацию. Она говорит нам о том, что если значения заданы до и после косой черты, тогда значения до косой черты задают горизонтальный радиус, а значения после — вертикальный. Если косой черты нет, то оба радиуса будут одинаковыми.

Итак, значения до косой черты ответственны за горизонтальные расстояния, а значения после косой черты — за вертикальные. Всё это хорошо, но тут возникает закономерный вопрос: «А о чём вообще идёт речь?». Помните процентные значения скругления углов, задаваемые для прямоугольных фигур? Там были применены разные абсолютные значения для вертикальных и горизонтальных расстояний и присутствовали асимметрично скруглённые углы. Именно такого эффекта можно добиться, используя косую черту при настройке border-radius .

Давайте сравним эффекты, которые дают следующие настройки: border-radius: 4em 8em и border-radius: 4em / 8em . Результаты получатся очень разными.

Если честно, фигуры, полученные в результате применения вышеописанных настроек, выглядят странновато. Однако не забывайте о том, что круги создаются с помощью таких параметров: border-radius: 50% . Круг получается из-за того, что два значения, задающие одну сторону, складываются и получается 100% (50% + 50% = 100%) и прямых линий от исходного квадрата не остаётся. Если порассуждать в том же духе о восьми значениях, используемых при задании свойства border-radius , то окажется, что с их помощью можно описать фигуру, которая похожа на гитарный медиатор или на клетку живого организма.

Скругление углов: border-radius

Скругление углов: border-radius

Следующим шагом мы скруглим углы фона, всплывающего в состоянии: hover, – воспользуемся свойством border-radius .

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

padding: 5px 15px;

color: rgba(255, 255, 255, 0.7);

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);

-webkit-border-radius: 14px;

-moz-border-radius: 14px;

border-radius: 14px;

background: rgba(255, 255, 255, 0.15);

Рис. 3.14 показывает фон ссылки в состоянии :hover – теперь со скругленными углами, полученными с использованием свойства border-radius . Так страница выглядит в браузерах Safari, Chrome, Firefox, Opera, равно как и в IE9. Помните, что беспрефиксное свойство border-radius поставлено в списке последним, чтобы оно получилось приоритет над всеми остальными. Например, Safari 5 поддерживает как беспрефиксное свойство border-radius , так и -webkit-border-radius , поддерживаемое в Safari 4.

Рис. 3.14. Как скруглить углы, пользуясь свойством border-radius

Возможно, читатель спросит: почему объявление border-radius ставится в правило для #nav li a , а не #nav li a: hover (где скругленные углы появляются на экране)? Ответ кроется в CSS-переходе, который мы сейчас добавим как последний штрих.

Свойство border-radius CSS3 и крах-коллапс: сбой не смешивается. Как использовать граничный радиус для создания свернутой таблицы с закругленными углами?

Изменить — Исходное название: Есть ли альтернативный способ достижения border-collapse:collapse в CSS (для того, чтобы иметь свернутую округленную таблицу углов)?

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

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

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

редактирует:

Я сделал простую страницу, чтобы продемонстрировать проблему здесь (только Firefox/Safari).

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

Резюме предлагаемых решений:

Окружение стола другим элементом с круглыми углами не работает, потому что квадратные углы стола «истекают».

Задание ширины рамки до 0 не сворачивает таблицу.

Внизу td углы по-прежнему квадрат после установки ячейки в ноль.

Использование JavaScript вместо этого позволяет избежать проблемы.

Возможные решения:

Таблицы генерируются в PHP, поэтому я могу просто применить другой класс к каждому из внешних th/tds и пометить каждый угол отдельно. Я бы предпочел не делать этого, поскольку он не очень изящный и немного боль для применения к нескольким таблицам, поэтому, пожалуйста, продолжайте предлагать предложения.

Возможное решение 2 — использовать JavaScript (jQuery, в частности) для создания углов. Это решение также работает, но все же не совсем то, что я ищу (я знаю, что я придирчив). У меня есть две оговорки:

  • Это очень легкий сайт, и я бы хотел, чтобы JavaScript был максимально минимальным
  • часть обращения, использующего радиус границы, для меня — грациозная деградация и прогрессивное совершенствование. Используя граничный радиус для всех закругленных углов, я надеюсь иметь последовательно округленный сайт в браузерах с поддержкой CSS3 и последовательно квадратный сайт в других (я смотрю на вас, IE).

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

Как сделать закругленные углы CSS: описание + CSS генераторы

Решил на своем сайте стандартным блокам в сайдбаре сделать закругленные углы с помощью CSS3. Раньше, помнится, чтобы реализовать данную задачу рисовали отдельные картинки для каждого угла и совмещали их с помощью нескольких DIV блоков в HTML. К счастью, сейчас все это легко задается в CSS стилях. Для определенных макетов и тематик (например, женской) подобное CSS закругление выглядят намного интереснее прямых строгих линий.

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

Свойство border-radius

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

Код для элементов на скриншоте выше:

То есть для него может задаваться от 1 до 4х параметров (в пикселях или процентах).

  • Одно значение: для всех углов сразу;
  • Два: первое значение для левого верхнего и правого нижнего углов, второе — для правого верхнего и левого нижнего;
  • Три: первое значение для левого верхнего угла, второе для верхнего правого и нижнего правого, третье — для правого нижнего;
  • Четыре: отвечает за углы в такой последовательности — левый верхний, правый верхний, правый нижний, левый нижний (по аналогии с заданием отступов).

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

  • border-top-left-radius;
  • border-top-right-radius;
  • border-bottom-right-radius;
  • border-bottom-left-radius.

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

Для border-radius также можно задавать круглые углы в виде эллипсоида. При этом используется слеш «/». Параметры до слеша указывают горизонтальный радиус, после — вертикальный. Например:

Поддержка border-radius разными браузерами

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

Для ранних версий Chrome, Safari, Firefox использовались специальные префиксы дабы реализовать закругленные углы CSS. Для первых двух это свойство -webkit-border-radius, для последнего -moz-border-radius. Вот как выглядит код стилей с поддержкой ранних версий браузеров:

Генераторы закругленных углов CSS

В сети можно найти разные сервисы, которые упрощают задачу создания закругленной рамки в CSS. Вы вполне можете использовать их в своей работе, а первая часть статьи позволит понимать сформированный код. Найти данные проекты не сложно, гуглите по ключу border radius generator. Вот парочка наиболее интересных проектов:

Предлагает максимальное число параметров: цвет фона, рамки, а также прозрачность и тень. Единственное, что итоговый код формируется в виде HTML, и придется «извлекать» из него CSS стили.

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

Инструмент с сайта developer.mozilla.org, где можете изменять форму блока непосредственно в самом элементе. Очень удобное и оригинальное решение.

Про CSS 3.0 Maker уже когда-то рассказывал, тут есть разные функции в том числе и border-radius. Сгенерированный код поддерживается всеми современными браузерами.

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

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

Топ-пост этого месяца:  Сезон заработка на студентах начинается Edu-Money обновились
Добавить комментарий
  • border-radius: 55px 45px 40px / 35px 20px;
    1. Верхний левый – 55px / 35px
    2. Верхний правый и нижний левый – 45px / 20px
    3. Нижний правый – 40px / 35px