border-radius with One Value

border-radius with one value is a CSS property that applies the same rounded corner radius to all four corners of an element, simplifying the syntax by specifying a single value for curvature.

Example: In this example, we are giving One value to the border-radius property will be applied to every corner equally.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <link rel="stylesheet" 
          href="styles.css"> 
    <title>CSS border radius</title> 
</head> 
  
<body> 
    <div class="container flex-utility"> 
        <div class="gfg-heading">w3wiki</div> 
        <p class="text"> 
            One value for all corners makes equally rounded 
        </p> 
        <div class="flex-utility box-items"> 
            <div class="box box1 one-px-unit flex-utility"> 
                Using px unit 
            </div> 
            <div class="box box2 one-p-unit flex-utility"> 
                Using % unit 
            </div> 
            <div class="box box3 one-em-unit flex-utility"> 
                Using em unit 
            </div> 
            <div class="box box4 one-rem-unit flex-utility"> 
                Using rem unit 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

CSS

/* Write CSS Here */
@import url( 
'https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 
  
.flex-utility { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
  
.container { 
    height: 100vh; 
    flex-direction: column; 
    gap: 30px; 
    font-family: 'Poppins', sans-serif; 
} 
  
.box { 
    height: 100px; 
    width: 200px; 
    font-size: 20px; 
} 
  
.box-items { 
    gap: 40px; 
    flex-wrap: wrap; 
} 
  
.gfg-heading { 
    color: rgb(17, 85, 17); 
    font-size: 50px; 
} 
  
.one-px-unit { 
    border-radius: 15px; 
    background-color: rgb(60, 145, 79); 
    color: beige; 
    border: 2px solid black; 
} 
  
.one-em-unit { 
    border-radius: 2em; 
    background-color: rgb(60, 145, 79); 
    border: 2px solid black; 
    color: beige; 
} 
  
.one-rem-unit { 
    border-radius: 3rem; 
    border: 10px; 
    background-color: rgb(60, 145, 79); 
    border: 2px solid black; 
    color: beige; 
} 
  
.one-p-unit { 
    border-radius: 25%; 
    background-color: rgb(60, 145, 79); 
    border: 2px solid black; 
    color: beige; 
} 
  
.text { 
    font-size: 25px; 
}

Output:

border-radius with one value

CSS Rounded Corners

CSS Rounded Corner facilitates the border-radius Property to create corners round for the element. The border-radius Property in CSS is used to define the radius and make corners round from the outer border edge of a specific element. This article will cover all the related aspects of the border-radius Property & understand them with the help of suitable examples.

Table of Content

CSS border-radius Property
border-radius with One Value
border-radius with Two Values
border-radius with Three Values
border-radius Four Values
Other CSS border Property
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left- radius

border-radius with One Value

HTML

CSS

CSS Rounded Corners

Similar Reads