Vous pouvez également créer des bords arrondis uniquement pour les coins supérieurs ou inférieurs de l'élément, ou donner à chaque coin un rayon d'arrondi différent - beaucoup de place pour l'imagination ! Exemple:

BorderElement (couleur d'arrière-plan : #EEDDFF ; bordure : 6px solide #7922CC ; rayon de bordure : 25px ; ) .borderElement1 (couleur d'arrière-plan : #FFE8DB ; bordure : 6px solide #FF5A00 ; rayon de bordure : 15px 100px 15px 100px; )

Mais ce n’est pas tout : au lieu de simple coins arrondis vous pouvez spécifier un arrondi elliptique. Pour ce faire, vous devrez préciser deux valeurs séparées par une barre oblique (pour les demi-axes horizontal et vertical de l'ellipse). Donnons un exemple sur un bloc de 150x450 pixels :

BorderElement ( couleur d'arrière-plan : #EEDDFF ; bordure : 6px solide #7922CC ; rayon de bordure : 280px/100px ; )

Les valeurs peuvent être mélangées (c'est-à-dire utiliser à la fois des arrondis réguliers et elliptiques dans le même style), et vous pouvez également ajouter style personnel pour chaque angle, en utilisant les propriétés appropriées :

• border-top-left-radius - pour le coin supérieur gauche ;
• border-top-right-radius - pour le coin supérieur droit ;
• border-bottom-left-radius - pour le coin inférieur gauche ;
• border-bottom-right-radius - pour le coin inférieur droit.

Le principe de l'arrondi des coins

L'image ci-dessous montre comment l'arrondi des coins est calculé en CSS. Ainsi, si une seule valeur est spécifiée pour l'angle - par exemple, 20px - cela signifie que l'arrondi se produira le long d'un cercle d'un rayon de 20 pixels. Dans le cas où deux valeurs sont spécifiées séparées par une barre oblique, par exemple 30px/20px , les coins seront arrondis le long d'une ellipse. La première valeur dans ce cas est la longueur du demi-axe horizontal de l'ellipse - 30px, et la deuxième valeur est la longueur du demi-axe vertical - 20px :

La propriété CSS border-radius est prise en charge par tout le monde versions modernes navigateurs.

Veuillez noter que les styles CSS d'une forme donnée sont saisis une seule fois dans le fichier, mais la balise HTML peut être placée un nombre illimité de fois sur le site.

À la suite du résultat, nous obtenons ce qui suit rectangle avec cadre.

Comment créer des coins arrondis en CSS

L'attribut est utilisé pour arrondir les coins rayon de frontière.

Nous pourrions ajouter uniquement cet attribut. Il affiche normalement le résultat de l'arrondi dans les nouvelles versions des navigateurs, mais de nombreux utilisateurs disposent encore d'anciennes versions dans lesquelles cet attribut ne fonctionne pas correctement. Par conséquent, pour des raisons de compatibilité, nous ajouterons quelques descriptions supplémentaires de cet attribut, lié directement à certains navigateurs, à notre bloc dans le fichier Style.css, ce qui donnera le code suivant :

La balise HTML div nous donnera rectangle dans un cadre avec un arrondiet les coins:

et la balise HTML pour afficher le texte ressemblera à ceci :

On a rectangle arrondi et texte :

Si vous supprimez les attributs de description de la taille du rectangle du code largeur Et hauteur, vous pouvez alors obtenir les formes suivantes avec des coins arrondis :

1. Pas de texte

Dans ce cas, les formulaires prennent les dimensions de l'environnement : la longueur correspond à la largeur du champ, et la hauteur change au fur et à mesure que le formulaire se remplit de contenu.

Arrondir les coins sélectionnés

Dans la description du style, le paramètre 10px dans l'attribut rayon de frontière affiche le rayon de courbure, qui peut être modifié en sélectionnant celui dont vous avez besoin. S'il est défini sur 0, l'arrondi n'aura pas lieu. Cette propriété peut être utilisée lorsque vous devez arrondir les coins sélectionnés.

Notons les valeurs du rayon d'arrondi pour chaque coin, en indiquant des zéros là où nous annulons l'arrondi. Par exemple, annulons l'arrondi des troisième et quatrième coins. Notre code ressemblera à ceci :

1. Coin supérieur gauche.

2. Coin supérieur droit.

3. Coin inférieur droit.

4. Coin inférieur gauche.

Il en résulte un rectangle avec des courbes sélectionnées uniquement dans les coins supérieurs.

Les angles sont comptés dans le sens des aiguilles d'une montre, en commençant par la gauche coin supérieur:

2. Arrondir les coins à l'aide de code HTML sans écrire dans un fichier de style

Considérons la deuxième méthode pour obtenir un rectangle aux coins arrondis avec en utilisant HTML code sans écrire dans un fichier de style.

Coins arrondis HTML

Il existe une petite fonctionnalité qui simplifie encore plus l'ensemble du processus : Coins arrondis HTML. Cela consiste à générer du code HTML, qui contient les mêmes styles que dans Codes CSS. Cela utilise les mêmes attributs que dans le bloc CSS et élimine le besoin d'écrire le bloc dans le fichier Style.css. En un mot, nous remplaçons complètement le code CSS par du code HTML.

Au lieu de notre bloc CSS, nous obtenons Script HTML, que l'on insère à l'endroit où doit apparaître le rectangle aux coins arrondis :

La première méthode d'arrondi des coins peut être utilisée lorsque la même forme est utilisée plusieurs fois sans changer de style. La deuxième méthode est utilisée pour les formulaires dont les styles sont utilisés une seule fois.

3. Images aux coins arrondis. Cadre autour de l'image HTML

Je veux aussi te donner informations utiles. Utilisant souvent photos pour la conception de sites Web, j'ai vraiment envie de les rendre encore plus belles en changeant leur forme, en les encadrant d'un cadre d'une belle couleur et de largeurs différentes. Cela pose la question : « Comment arrondir les coins d'une image?”.

Cela se fait très simplement et nous allons maintenant apprendre comment le faire.

Plaçons l'image sur le site, en faisant son propre arrière-plan comme arrière-plan de la balise div. Nous obtenons le code et l'image suivants :

Arrondir les coins de l'image en ajoutant un cadre

Arrondir les coins des images en CSS et HTML et ajouter une bordure peut être effectué de l'une des deux manières décrites ci-dessus.

En utilisant la première méthode de cet article, les codes d'image pour le fichier de style et le code HTML de la balise div ressembleront à ceci :

Veuillez noter que certains attributs peuvent être saisis dans le fichier de style et d'autres dans la balise div. Dans notre cas, les dimensions de l'image largeur et hauteur sont insérées dans le code HTML.

Le code HTML de la deuxième méthode, sans utiliser le fichier de style décrit dans cet article, ressemble à ceci :

Grâce aux codes de chacune des deux méthodes, nous obtenons le même résultat - une image aux coins arrondis :

). Cela se fait en utilisant Propriétés CSS rayon-frontière . Dans cet article, nous examinerons toutes les différentes options.

La syntaxe CSS border-radius est la suivante :

rayon-bordure : [ valeur_filet];

Comment arrondir les coins en HTML en utilisant CSS

Regardons des exemples d'arrondis de coins à l'aide de CSS. Par exemple

В этом случае все 4 края элемента будут скруглены по 30px.

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

Можно скруглять каждый угол с разными радиусами. Для этого нужно написать

border-radius : 10px 7px 0px 0px ;

Последовательность этих цифр следующая:

• Верхний левый угол (в примере это 10px)
• Верхний правый угол (в примере это 7px)
• Нижний правый угол (в примере это 0px)
• Нижний левый угол (в примере это 0px)

Например

Результат:

Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол

border-top-left-radius : 10px ; // верхний левый угол border-top-right-radius : 7px ; // верхний правый угол border-bottom-right-radius : 0px ; // нижний правый угол border-bottom-left-radius : 0px ; // нижний левый угол

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

Задание второго радиуса нужно задавать через слэш "/" в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса

border-radius : 5px 5px 5px 5px / 10px 10px 10px 10px ; или можно задать так: border-top-left-radius :5px 10px ; // верхний левый угол border-top-right-radius :5px 10px ; // верхний правый угол border-bottom-right-radius :5px 10px ; // нижний правый угол border-bottom-left-radius :5px 10px ; // нижний левый угол

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

Например, с помощью этих свойств можно сделать эллипс:

Результат:

Значения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:

border-radius : 100px / 200px ;

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

Задание толщины, цвета и типа линии при скруглении

Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border :

border : [толщина ] [тип_линии ] [цвет ];

Например:

border : 1px solid #00ff00 ;

• Толщина - задается чаще всего в пикселях
• Тип линии может принимать значения:
  • solid (сплошной)
  • dashed (пунктирный)
  • dotted (ряд точек)
  • groove (линия бороздка)
  • inset (вдавленная линия)
  • outset (выдавленная линия)
• Цвет можно задать либо в формате RGB, либо просто названием (см. коды и названия html цветов)

Приведем пример

Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.

Свечение для скругления

Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow

box-shadow : 0px 0px 4px 2px #a0b ;

Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр - цвет (#a0b).

Например

Результат:

Мы приводили всегда в качестве примеров тег