Compare CSS border-radius shorthand - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-radius

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border-radius

Description

Compare CSS border-radius shorthand

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

body {<!--from   w w w. j  a v  a 2s. co m-->
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   font-size: 12px;
   font-family: sans-serif;
}
.clear {
   width: 100%;
   height: 0;
   border: 0;
}
.original, .shorthand {
   border-color: silver;
   border-width: 1px;
   width: 161px;
   height: 100px;
   margin: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}
.original {
   background-color: goldenrod;
}
.shorthand {
   background-color: gold;
   justify-content: center;
}
#tlo {
   border-top-left-radius: 50% 100%;
}
#tls {
   border-radius: 50% 0 0 0 / 100% 0 0 0;
}
#tro {
   border-top-right-radius: 50% 100%;
}
#trs {
   border-radius: 0 50% 0 0 / 0 100% 0 0;
}
#bro {
   border-bottom-right-radius: 50% 100%;
}
#brs {
   border-radius: 0 0 50% 0 / 0 0 100% 0;
}
#blo {
   border-bottom-left-radius: 50% 100%;
}
#bls {
   border-radius: 0 0 0 50% / 0 0 0 100%;
}
#blo,
#tlo {
   margin-left: auto;
}
#brs,
#trs {
   margin-right: auto;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div id="tlo" class="original">
    Top Left 
  </div> 
  <div id="tro" class="original">
    Top Right 
  </div> 
  <div id="tls" class="shorthand">
    Top Left 
   <br> shorthand 
  </div> 
  <div id="trs" class="shorthand">
    Top Right 
   <br> shorthand 
  </div> 
  <div class="clear"></div> 
  <div class="clear"></div> 
  <div id="blo" class="original">
    Bottom Left 
  </div> 
  <div id="bro" class="original">
    Bottom Right 
  </div> 
  <div id="bls" class="shorthand">
    Bottom Left 
   <br> shorthand 
  </div> 
  <div id="brs" class="shorthand">
    Bottom Right 
   <br> shorthand 
  </div> 
  <div class="clear"></div> 
  <div class="clear"></div>  
 </body>
</html>

Related Tutorials