top border radius css code example

Example 1: css rounded corners

/* Set rounded corners with border-radius property */

.class {
  border-radius: 4px;
}

.circle {
  border-radius: 50%;
}

Example 2: css scaling border radius

// to scale a border-radius based upon the element size it is nested in. (rounded corners)
// simply change the vw number from .1 to 10 or whatever to change the amount of curve.
#box1 {
  border-radius: 2vw;
}

Example 3: border-radius circle using %

.circle {
    background-color:#fff;
    border:1px solid red;    
    height:100px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:100px;
}
<div class="circle"></div>

Example 4: css curve table border

#rcorners {
  border-radius: 25px;
}

Example 5: how to round input border

border-radius:px,%

Tags:

Html Example