border-radius

The border-radius property sets the radius for rounding the corners of the border.
If the frame is not set, then the rounding occurs with the background.

Syntax



border-radius: value;

Exapmle

border-radius: 10px;


It is allowed to use one, two, three or four values, listing them separated by a space. It is also acceptable to write two values separated by a forward slash (/). The values are numbers in any acceptable CSS format.

In the case of using percentages, the countdown is relative to the block width.



border-radius: value1;

border-radius: value1 value2;

border-radius: value1 value2 value3;

border-radius: value1 value2 value3 value4;

value1 - Radius is specified for all four corners.

value2 - The first value specifies the radius of the top left and bottom right corners, the second value sets the radius of the top right and bottom left corners.

value3 - The first value sets the radius for the top left corner, the second for both the top right and bottom left corners, and the third for the bottom right corner.

value4 - Sets the radius for the top left, top right, bottom right, and bottom left corners in turn.


	  
	<div class="value1">value1</div>
	<div class="value2">value2</div>
	<div class="value3">value3</div>
	<div class="value4">value4</div>

	
		
	
	.value1 {
			
   border: 1px solid blue;
   border-radius: 5px;
   margin: 10px;
   padding: 10px;
   width:50%;
	 
	}
	
	
	.value2 {
			
   border: 1px solid blue;
   border-radius: 5px 15px;
   margin: 10px;
   padding: 10px;
   width:50%;
	 
	}
	
	.value3 {
			
   border: 1px solid blue;
   border-radius: 5px 5px 15px;
   margin: 10px;
   padding: 10px;
   width:50%;
	 
	}
	
	.value4 {
			
   border: 1px solid blue;
   border-radius: 5px 5px 5px 15px;
   margin: 10px;
   padding: 10px;
   width:50%;
	 
	}
	
	  
	
solid
solid
solid
solid