De nombreuses formes peuvent être utilisées sur notre page Web pour créer un meilleur design, comme les cercles, les carrés, les rectangles, et plus. Ces formes peuvent être créées en utilisant diverses propriétés CSS. Plus précisément, les coins arrondis de la boîte sont plus efficaces que les coins pointus car ils font que nos yeux suivent facilement les lignes.

Cet article discutera de la procédure d'utilisation de la propriété CSS Border-Radius pour créer des boîtes avec des coins arrondis.

Comment créer des boîtes dans HTML?

Pour créer deux cases, ajoutez deux éléments Div de classe avec les noms "box-1" et "box-2", et ajouter

élément avec la rubrique dans chacun des éléments div comme suit:

Exemple Boîte 1

Exemple Boîte 2

Maintenant, appliquez des styles CSS aux éléments HTML.

Élément de style H1

H1
rembourrage: 50px;

Le

L'élément est fourni avec la propriété de rembourrage comme «50px”Pour créer l'espace supplémentaire spécifié dans le titre.

Style Box-1 et Box-2 Div Elements

# box-1,
# box-2
marge: 1px automatique;
Largeur: 250px;
hauteur: 120px;
Color en arrière-plan: chocolat;
taille de police: 10px;
Couleur: Ghostwhite;

Les propriétés CSS appliquées aux Box-1 et Box-2 Div sont décrites ci-dessous:

• "largeur»La propriété définit la propriété de largeur sur 250px.
• "hauteur»La propriété est utilisée pour le réglage de la hauteur de l'élément à 250px.
• "Couleur de l'arrière plan»La propriété est utilisée pour spécifier la couleur d'arrière-plan de l'élément.
• "taille de police»La propriété est utilisée pour le réglage de la taille de la police de l'élément.
• "couleur»La propriété est utilisée pour le réglage de la couleur de la police.

En fournissant le code susmentionné, les cases créées seront affichées comme suit:

On peut observer que des boîtes sont créées, mais leurs coins sont toujours pointés. La section ci-dessous expliquera l'utilisation de la propriété Border-Radius pour fabriquer des boîtes avec des coins arrondis.

Qu'est-ce que la propriété Border-Radius CSS?

Le CSS "rayon frontalier«La propriété est utilisée pour définir le rayon de l'élément. Cette propriété peut comprendre une à quatre valeurs. Ces valeurs sont expliquées ci-dessous.

Syntaxe - une valeur

Border-Radius: tous [/ tous];

Une syntaxe de valeur fait référence au rayon des quatre coins de la boîte.

Syntax3- deux valeurs

Border-Radius: top-gauche et inférieur droit top-droit et inférieur à gauche
[/ top-gauche et inférieur droit supérieur-droit et inférieur-gauche];

La syntaxe de deux valeurs spécifie le rayon car la première valeur indique le rayon dans les coins supérieur gauche et inférieur à droite, et la deuxième valeur spécifie le rayon sur les coins supérieur droit et inférieur à gauche.

Syntaxe - trois valeurs

Border-Radius: haut-gauche top-droite et inférieur à gauche en bas à droite
[/ top-gauche top-droite et inférieur gauche en bas à droite];

La syntaxe de trois valeurs spécifie la première valeur représente le coin supérieur gauche, la deuxième valeur indique les coins en haut à droite et inférieur à gauche et la troisième valeur s'applique au coin inférieur droit.

Syntaxe - quatre valeurs

Border-Radius: haut de gauche top-droit en bas à droite à gauche à gauche
[/ top-gauche top-droite en bas à droite inférieure-gauche];

Syntaxe de quatre valeurs spécifie la première valeur appliquée au coin supérieur gauche, la deuxième valeur s'applique au coin supérieur droit, la troisième valeur s'applique au coin inférieur droit et la quatrième valeur s'applique au coin inférieur à gauche à gauche.

Comment créer des boîtes d'angle arrondies à l'aide de CSS?

La section de code ci-dessous explique comment nous pouvons créer des boîtes de coin rondes.

Box-1 de style

# box-1
Color en arrière-plan: RVB (255, 183, 0);
Border-Radius: 100px 2px 100px 1px;

L'élément DIV Box-1 est appliqué avec des propriétés décrites ci-dessous:

• "Couleur de l'arrière plan»La propriété est utilisée pour définir la couleur d'arrière-plan de l'élément.
• "rayon frontalier"Avec la valeur définie comme"100px 2px 100px 1px”Où 100px indique le coin supérieur gauche, 2px indique le coin supérieur droit, 100px indique le coin inférieur droit et 1px indique le coin inférieur gauche.

Style Box-2

# box-2
Color en arrière-plan: Darkcyan;
Border-Radius: 30px;

Les propriétés appliquées à l'élément Box-2 div sont décrites ci-dessous:

• "Couleur de l'arrière plan»La propriété définit la couleur de l'élément Box-2 Div avec le«sombre" couleur.
• "rayon frontalier»Propriété avec la valeur définie comme«30px”Définit le rayon de la boîte à 30px des quatre coins.

Donc, pour changer les coins de la boîte, les valeurs de la propriété Border-Radius peuvent être définies en conséquence. En fournissant les propriétés de style CSS ci-dessus aux éléments Box-1 et Box-2 Div, le résultat ressemblera à ceci:

Nous avons réussi à apprendre la propriété Border-Radius pour faire les coins ronds de boîtes uniques ou multiples.

Conclusion

Pour créer un meilleur design pour notre page Web, différentes formes peuvent être utilisées, telles que les cercles, les carrés, les rectangles et plus peuvent être créés avec CSS. Les boîtes avec des coins arrondies peuvent être créées dans CSS en utilisant le CSS "rayon frontalier" propriété. Cet article a démontré l'utilisation du Radius frontalier CSS pour créer des boîtes avec des coins arrondis avec des exemples.