• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Tutorial CSS Border Radius - Border-radius:

Malcolm

Administrator
Administrator
Verified
CSS Border Radius Property
Hello Coders!

Another quick tutorial! This tutorial is using the border-radius property to create rounded corners to rounded elements. You should have an understanding of both HTML & CSS, you can check out What is HTML & What is CSS for more info.

In this tutorial, we will cover the basic CSS syntax and how border-radius can be used. First, understand that border-radius is actually a CSS property which means it goes within a CSS statement. As shown below:
Basic Syntax:
CSS:
selector {
    border-radius:value;
}
Note: border-radius will change all four corners of an element. However, you can change a specific corner which I will cover further down.
Example:
CSS:
img {
    border-radius /* border-radius is a property which requires a value.*/
}
However, border-radius requires a value, you can use pixels, percentages etc. Like so:
CSS:
img {
    border-radius: 10px; /* border-radius has a value of 10px*/
}

Example Usage:
Image with soft corners.
CodeBefore:After:
Code without Border Radius:
img {
width: 200px;
height: 200px;
}
1605573750048.png
1605573750048.png
CSS:
img {
width: 200px;
height: 200px;
border-radius: 10px;
}
1605573750048.png
1605573969525.png
CSS:
img {
border-radius: 50%;
}
1605573750048.png
1605574069834.png
CSS:
img {
border-top-left-radius: 10px;
}
1605573750048.png
1605574195083.png
CSS:
img {
border-top-right-radius: 10px;
}
1605573750048.png
1605574265082.png
CSS:
img {
border-bottom-left-radius: 10px;
}
1605573750048.png
1605574339107.png
CSS:
img {
border-bottom-right-radius: 10px;
}
1605573750048.png

1605574426413.png
CSS:
img {
border-top-right-radius: 10px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 10px;
}
1605573750048.png
1605574519509.png
This code simplifies all the other examples in one line of code. You can use which ever you prefer. A tip on how to read the values below: Look at it as a clock, 10px is top, 40px is right, 20px bottom and 5px left.
CSS:
img {
border-radius: 10px 40px 20px 5px;
}
1605573750048.png
1605574595982.png
I hope this helps you get started with Border-radius. Let me know if you have any questions!
 

Attachments

  • 1605573953544.png
    1605573953544.png
    111.3 KB · Views: 1
Last edited:
Top Bottom