Border-Radius: Web Design Series: CSS Part 11

border-radius

The border-radius property
Get the source code for this lesson at the end of the post!

We’ve finally made it through most of the border stuff. This is just one example in CSS where you have millions of different possible designs to come up with. What you’re learning in these border lessons is very similar in many other CSS properties. So let’s get to it. Below are some examples of the border-radius property.

border-radius code

border-radius display

To make the examples clearer in the display image, I have changed all of the border styles to solid, and the border widths now just have one value. I’ve also copied our paragraph text and pasted it a few more times to create a bigger paragraph. Like always, the source code for this lesson will be at the end of the post for you to copy and paste into your text editor in case the example images are hard to make out. This way you can either run the code in a browser yourself or zoom in on the page to about 200%. There is a lot to fit inside of some of the example images, so they can get quite hard to see. But I do recommend typing the code out into a text editor yourself because you will retain much more of the code learned. Firsthand experience is your best friend in web design.

I have three example uses of the border-radius property in the above images. Just like all of the other border properties that we’ve been dealing with, the border-radius property can take one to four values. If you are giving a CSS property more than one value, it is called writing it shorthand. This is because you are not creating multiple property/value pairs; you are combining them into one. The first example we have is in our h4 rule. It has a border-radius of 10 pixels, and because we gave it one property; it affects all four sides of the border. Resulting in a completely rounded border on all sides. The higher pixel amount you give the value; the more radius(rounded) your border corners will get. Eventually, you will even be able to make perfect circles with the border-radius property.

Our second example in the p rule has two values for the border-radius property. With two values; the top left and bottom right corners are affected by the first value(12px). The top right and bottom left corners are affected by the second value (4px). In the last example, we give the border-radius property in our ol rule four values which gives the top right and bottom left corners a radius of 8 pixels. The other two corners have no radius because we gave them values of 0.

So now you know how the border-radius property in CSS works and have an idea of how to shorthand code all of these border declarations. But some web designers prefer to target each corner or side individually. I made a list of properties to give you some examples of how to target specific parts of your borders.

Border properties to target specific areas

  • border-top-style:
  • border-right-style:
  • border-bottom-style:
  • border-left-style:
  • border-top-color:
  • border-right-color:
  • border-bottom-color:
  • border-left-color:
  • border-top-width:
  • border-right-width:
  • border-bottom-width:
  • border-left-width:
  • border-top-left-radius:
  • border-top-right-radius:
  • border-bottom-right-radius:
  • border-bottom-left-radius:

You should now understand borders in CSS and be able to change the style, color, width, and radius of them in any way you want. Before we finish up with the border lessons in CSS, I want to go over a very common method of adding a border shorthand. The shorthand version limits the width, style, and color to one that affects all four sides. So keep that in mind if you want to design a border with different styles from one side to the other.

An example of a shorthand border is: border: 1px solid green; This would give the element that it’s applied to a border that is 1 pixel thick, solid line style, and a color of green on all four sides.

You now know how to shorthand code a border with width, style, and color. You also know how to individually shorthand specific border properties, for example, border-color: blue red orange purple;. And you can target each one of the border properties by the specific parts that you want to style Repetition is key in coding, so don’t be afraid to try things over and over again. Test out different ideas to see what you can come up with. If you feel like you need to go through the border lessons one more time, don’t be discouraged. It’s a whole lot to take in and you are inadvertently learning a process of coding in CSS that you’ll use over and over again with many other CSS properties. To read The border posts from the beginning; CLICK HERE. Make sure you feel confident before moving on to the next lesson. As always, thanks for reading and I’ll see you next time.

Source Code

<!DOCTYPE html>
<html>
<head>
<title>The Border Property</title>
<style>
h4{
border-style: solid;
border-color: blue;
border-width: 3px;
border-radius: 10px;
}
p{
border-style: solid;
border-color: #FF0000;
border-width: 2px;
border-radius: 12px 4px;
}
ol{
border-style: solid;
border-color: blue red green yellow;
border-width: 3px;
border-radius: 0 8px 0 8px;
}
</style>
</head>
<body>
<h4>BORDERS IN CSS</h4>
<p>This lesson is all about borders. We are going to learn how to add borders to elements and add style to them.
This lesson is all about borders. We are going to learn how to add borders to elements and add style to them.
This lesson is all about borders. We are going to learn how to add borders to elements and add style to them.
This lesson is all about borders. We are going to learn how to add borders to elements and add style to them.
This lesson is all about borders. We are going to learn how to add borders to elements and add style to them.
This lesson is all about borders. We are going to learn how to add borders to elements and add style to them.</p><ol>
<li>border-style</li>
<li>border-width</li>
<li>border-color</li>
<li>border-radius</li>
</ol>
</body>
</html>

posted by Clear Coded Programming

Interested in web development, design and programming?
Sign up for the newsletter to receive updates

Please Leave a comment

%d bloggers like this: