Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             




TRAIN INTENSELY LIKE NEVER BEFORE AND PUSH YOUR LIMITS!

Publish perfectly-optimized content in 1-click









 
 
 

How do you make a border radius round in CSS?

 
 

The border-radius property

 

The CSS border-radius property rounds the corners of an HTML element.
The three squares with rounded corners below are therefore distinguished by the value
set on border-radius: 15px, 25px and 35px.

.style-1 {
  width: 150px;
  height: 150px;
  background-color: #04AA6D;
  border-radius: 15px;
}

 
How do you make a border radius round in CSS?
 

.style-2 {
  width: 150px;
  height: 150px;
  background-color: #04AA6D;
  border-radius: 25px;
}

 
How do you make a border radius round in CSS?
 
.style-3 {
  width: 150px;
  height: 150px;
  background-color: #04AA6D;
  border-radius: 35px;
}


The value entered thus corresponds to the distance over which the rounding effect is applied
and is applied by default to the four corners of the element.
 
How do you make a border radius round in CSS?
 

 

How to distinguish the four angles of the form ?

 
To vary the four angles, you can use the four properties corresponding to the four angles.
 
How do you make a border radius round in CSS?
 
A simpler solution is to use the shortened version border-radius by specifying 2 or 4 values.
Entering two values ​​distinguishes the top left / bottom right corners from the top right / bottom left corners.

.style-4 {
  width: 250px;
  height: 250px;
  background: #04AA6D;
  border-radius: 0% 34% 0% 39%;
}

 
How do you make a border radius round in CSS?
 

Entering four values ​​distinguishes the four angles by rotating around the shape clockwise
starting from the top left corner.
.style-5 {
  width: 250px;
  height: 250px;
  background: #04AA6D;
  border-radius: 10% 20% 30% 40%;
}

 
How do you make a border radius round in CSS?
 

 

Distinctions of vertical and horizontal rays

 
In order to distinguish the horizontal rays from the vertical rays, it suffices to enter the two values
​​by separating them with a slash /. The value(s) entered before the slash apply to horizontal rays and
the value(s) entered after apply to vertical rays.

 
How do you make a border radius round in CSS?
 

In the following example, the horizontal rays are set to 40px for the four corners and the vertical
rays are set to 10px for the four corners.

.style-6 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 40px / 10px;
}

 
How do you make a border radius round in CSS?
 

By following the same rules as we saw previously, it is thus possible to enter up to eight angle values,
four for the horizontal angles and four for the vertical angles:
border-radius: Rh1 Rh2 Rh3 Rh4 / Rv1 Rv2 Rv3 Rv4 ;

 

Examples of shapes

 

 

Circle

.style-7 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 50px;
  /* or  with percent %*/ 
  border-radius: 50%;
}

 
How do you make a border radius round in CSS?
 

 

A thumbtack

.style-8 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 100% 0% 100% 100%;
}

 
How do you make a border radius round in CSS?
 
 

A quarter circle

.style-9 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 0% 0% 0% 100% 
}

 
How do you make a border radius round in CSS?
 

 

A lemon

.style-10 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 80% 10% 80% 10%;
}

 
How do you make a border radius round in CSS?
 

 

You can use this little tool to generate the css code

 

It might also interest you


How can we do animations with only CSS

How to create horizontal menu in CSS

How to create menu with css and javascript

How to create sign up form with HTML and CSS

How To make a responsive website

How to create GLITCH effect with CSS

How to change the style of the scrollbars

How to create a Focus effect on hover using CSS

How to create a footer using Bootstrap: tutorial and example


Leave comment
          

Save nickname and email in this browser for the next time.



Loading...     
close publicity
Nord VPN