Как сделать закругленные углы таблицы

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

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

Код	Описание	Вид
div	Радиус скругления для всех уголков сразу.
div	Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.
div	Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.
div	Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.

В примере 1 показано создание блока со скруглёнными уголками.

Пример 1. Уголки у блока

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Рис. 1. Блок со скруглёнными уголками

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

Пример 2. Круглая кнопка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Рис. 2. Круглая кнопка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Рис. 3. Свечение вокруг кружка

С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Рис. 4. Использование эллиптических уголков

Источник

Закруглённые углы (свойство border-radius) | CSS

Генератор border-radius CSS

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

Использование свойства CSS border-radius (w3.org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.

background box-shadow outline [решение] border-image [решение]

Круглые углы у картинки

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

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

HTML таблица с закругленными углами

Закруглить таблицу можно, но с border-collapse: separate;

border-radius у вложенных элементов

Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы

CSS скругление углов у border-image

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

Округление outline

Закругление углов в примерах

HTML овал

HTML круг

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

HTML цилиндр

Закругленные три края, HTML капля

HTML полукруг

HTML лист

HTML яйцо

Камушек HTML

29 комментариев:

Если ставлю стиль
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
для другого див NMitra Пример на https://jsfiddle.net/ выложите и его ссылку дайте в комментариях, а лучше свою страницу. Можете сами попробовать разобраться в селекторах. Приоритетный тот, что длиннее http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Вам что нужно: 15px или 50%? Fedor Timofeev Здравствуйте.
мне нужны и 15px и 50%? так как используются в абсолютно разных случаях.
Может из как то переименовать?

ссылка на страницу, где применяются оба класса: http://ex-hort.ru/

class=»grayscale grayscale-fade»
CSS: /*обесцвечивание круглой картинки */

img.grayscale <
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover <
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg <
transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg <
opacity: 0;
>
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>

/*обесцвечивание круглой картинки конец */

CSS: /*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
Fedor Timofeev что все дивы куда то подевались. NMitra Здравствуйте, код в комментариях через http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html пропустите. И всё же я не поняла что не так. Как могут конфликтовать стили, если они привязаны к разным тегам? Расскажите, пожалуйста, на словах, например, так «Картинка с нарисованным попугаем должна быть закруглена на 15px, а она на 50%». Fedor Timofeev Так, ладно, на пальцах.
До того как в CSS вставил /*обесцвечивание круглой картинки */

img.grayscale <
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover <
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg <
transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg <
opacity: 0;
>
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>

ВОТ ЭТОТ СТИЛЬ, который ниже, РАБОТАЛ
CSS: /*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
НО ПОСЛЕ ПОЯВЛЕНИЯ В CSS /*обесцвечивание круглой картинки */

Стиль border-radius: 15px; тупо не работает. NMitra Проверяйте ошибки в CSS. Я, например, увидела «яЛП»

img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>яЛП Fedor Timofeev Спасибо большое за содействие но проблема решилась и Ваша помощь тоже была очень нужна.
Здесь мне всё помогли:
http://goo.gl/BRNaui
С удовольствием размещу ссылку на Ваш ресурс без rel=»nofollow» на своем сайте без всяких условий с моей стороны.
Укажите как Вы хотите видеть свою ссылку.
На почту vamsydanado-a@yandex.ru

NMitra А я увидела в исходном коде не точку, а «яЛП»

По поводу ссылки: с каким пожелаете анкором, на какую захотите страницу. Всегда считала, что естественную ссылку может поставить только автор веб-проекта. А на «Шпаргалку блоггера» ведут в основном такие.

Источник

Закругление углов таблиц и блоков с помощью css

Чтобы углы таблицы или блока отображались на странице сайта закругленными можно использовать несколько вариантов.

Закругление углов, один фоновый рисунок

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

В HTML пишем:

В CSS указываем размер и адрес фоновой картинки, размер и цвет шрифта:

#table-round1 <
width:600px;
height:76px;
background: url(‘images/pic.png’) no-repeat;
margin: 0;
padding: 9px;
font:12px verdana, arial, helvetica, sans-serif;
color : #866057;
>

В результате получаем вот такую таблицу:

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

Закругление углов, три фоновых рисунка

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

В HTML пишем:

В CSS указываем размеры и адреса фоновых картинкок, размер и цвет шрифта:

#table-round3 <
margin : 0;
padding : 0;
width:600px;
font:12px verdana, arial, helvetica, sans-serif;
color : #866057;
>
.top <
background : url(‘images/top.png’) no-repeat;
height : 10px;
padding : 0;
margin : 0;
>
.center <
background : url(‘images/center.png’) repeat-y;
padding : 8px;
margin : 0;
>
.bottom <
background : url(‘images/bottom.png’) no-repeat;
height : 10px;
padding : 0;
margin : 0;
>

В результате получаем вот такую таблицу:

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

Закругление углов таблиц и блоков без графики

Также без особых усилий можно сделать таблицу или блок с закруглёнными углами не прибегая к услугам графических редакторов, т.е. без графики. Правда, это работает не во всех браузерах. Лучший браузер всех времен (Internet Explorer) опять отличился, этот метод работает во всех популярных браузерах: Mozilla Firefox, Safari и Google Chrome, кроме Internet Explorer.

В HTML пишем:

В CSS указываем цвет фона, цвет рамки, и т.д.

#round <
background-color: #f5f5f5;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
>

В результате получаем таблицу или блок с закругленными углами:

Еще один вариант закругления углов блоков

Закругленные углы блока популярнейшая вещь в современном веб-дизайне. Чтобы сотворить такое люди придумали довольно много способов. Вот один из них.

В HTML пишем:

Заголовок

В CSS пишем:

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

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

Работает во всех популярных браузерах.

Перед тем как применить какой-либо «рецепт» проверяйте его работу в разных браузерах.

При использовании материалов «HTML-pedia» ссылка на сайт html-pedia обязательна.

Источник

Как сделать скругленные углы у HTML таблицы?

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

Примеры:

Делается этот эффект очень просто и быстро.

5 последних добавленных файлов в рубрике»Видеоуроки»

Как заставить человека просмотреть видео на сайте до конца?

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

Эффект дразнящего уголка для вашего сайта

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

Как добавить комментарии Вконтакте к своему сайту

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

Эффективная гостевая книга для joomla-сайта

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

Открываем счет в системе PayPal

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

Источник

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

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

Источник