CSS Border-radius
Home Learning Path LAMP HTML/CSS PHP MySQL JavaScript YouTube Blog PHP Fiddle

Intro to CSS: Border-radius

Quick Copy Boxes




The CSS border-radius property is used to create elements with rounded corners. You can even use border-radius to make circles.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

The value of border radius can be expressed as a number of pixels or a percent.


Example: 25px

This is a div container with a border-radius of 25px

CSS


.px25 {
   border-radius: 25px;
   background: #FFCF1C;
   max-width: 50%;
   padding: 25px;
}

➼ px25 - This is our CSS class name.
➼ border-radius - It is 25px.
➼ background - The background color is #FFCF1C - A golden orange color.
➼ max-width - I set it to 50%, so it is about half the size of it's parent container (compare the width to the width of the syntax box below it)
➼ padding - I added 25px of padding. With border-radius, padding is often esstential to make sure your content doesnt stick out of the container.

HTML


<div class = "px25">
  This is a div container with a border-radius of 25px
</div>

Now, let's look at some more examples of border-radius. Look at the divs below. Each div is marked with it's border-radius. The border-radius and class names differ from the example above, but all the other code (background, max-width and padding) is the same.


Border-radius: 10 px

This is a div container with a border-radius of 10px

Border-radius: 50 px

This is a div container with a border-radius of 50px

Border-radius: 100 px

This is a div container with a border-radius of 100px

Border-radius: 10%

This is a div container with a border-radius of 10%.

Border-radius: 25%

This is a div container with a border-radius of 25%.

Border-radius: 50%

This is a div container with a border-radius of 50%.

Border-radius: 100%

This is a div container with a border-radius of 100%.

Example: Circle

To create a circle:
1) height and width should be equal
2) border-radius should be 50%

CSS


.circle {
  border-radius: 50%;
  background: green;
  width: 350px;
  height: 350px;
}

➼ circle - This is our CSS class name.
➼ border-radius - It is 50%.
➼ background - The background color is green.
➼ height & width - They are each set equal to 350px.

HTML


<div class = "circle"></div>

Border-radius: By Corner

This div has border-radius specified by corner!

You can individually select a border-radius for each corner. Check out the syntax below:

CSS


 .byCorner {
    /* Each corner is specified*/
    border-top-left-radius:25px;
    border-top-right-radius:50px;
    border-bottom-right-radius:50px;
    border-bottom-left-radius:25px;
    /* Padding around content*/
    padding: 25px;
    /* Background color*/
    background: green;
    /* Text color*/
    color: white;
  }

HTML


<div class = "byCorner">
  This div has border-radius specified
  by corner!
</div>
Color Selector



Hex:


RBG:

Play with the code in the code editor below. Don't forget to check-out the CSS tab. Also, continue working on the ad you started in CSS Color lesson.