Как скруглить края в css
Перейти к содержимому

Как скруглить края в css

  • автор:

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

-moz-border-radius — Хак для Mozilla Firefox
-khtml-border-radius — Хак для Konquerer
-webkit-border-radius — Хак для Google Chrome и Safari, в последних версиях этих браузеров в принципе не нужен
border-radius — Свойство CSS3 для закругления углов

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

-moz-border-radius: 10px 0 10px 0 ; -khtml-border-radius: 10px 0 10px 0; -webkit-border-radius: 10px 0 10px 0; border-radius: 10px 0 10px 0;

-moz-border-radius: 10px 0 10px 0 ; -khtml-border-radius: 10px 0 10px 0; -webkit-border-radius: 10px 0 10px 0; border-radius: 10px 0 10px 0;

4 значения 4 угла по порядку: верхний левый, верхний правый, нижний правый, нижний левый
(по часовой стрелке)

Закругление углов таблиц и блоков с помощью 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;
>

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

Углы этого блока (div’а) выглядят закругленными потому что мы использовали CSS3, который понимают все популярные браузеры: Mozilla Firefox, Safari и Google Chrome, кроме Internet Explorer.

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

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

В HTML пишем:

Заголовок

Здесь текст

В CSS пишем:

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

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

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

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

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

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

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

5d564fcf97318804139658.jpeg

Как сделать вот такое закругление снизу фото, как на картинке с помощь. CSS?

  • Вопрос задан более трёх лет назад
  • 5856 просмотров

Комментировать

Решения вопроса 0

Ответы на вопрос 3

RaySS

а есть слово верстальщица?

border-top-left-radius — для верхнего левого угла;
border-top-right-radius — для верхнего правого угла;
border-bottom-left-radius — для нижнего левого угла;
border-bottom-right-radius — для нижнего правого угла (в твоем случае)

Ответ написан более трёх лет назад

Нравится 5 2 комментария

balex777 @balex777 Автор вопроса

в углу получается закругление, как убрать ?

5d5654397a218609662915.png

я сделал так
border-bottom-right-radius: 1500px 90px;

RaySS

5d565de613948537367103.png

Первое значение устанавливает радиус по горизонтали, а второе — радиус по вертикали, попробуй с ними поиграть или вообще оставить только одно значение) А вообще, я бы их точно уменьшила на твоем месте

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 методами с помощью изображения




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

ugly CSS, primer skruglenija

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

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

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

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

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

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

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

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

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

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Скругленные CSS углы? – Не вопрос!

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

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