Border radius in CSS

3 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$49.99
List Price:  $69.99
You save:  $20
€42.95
List Price:  €60.14
You save:  €17.18
£37.30
List Price:  £52.23
You save:  £14.92
CA$68.86
List Price:  CA$96.41
You save:  CA$27.55
A$76.77
List Price:  A$107.49
You save:  A$30.71
S$64.40
List Price:  S$90.17
You save:  S$25.76
HK$390.19
List Price:  HK$546.29
You save:  HK$156.10
CHF 40.24
List Price:  CHF 56.34
You save:  CHF 16.10
NOK kr500.18
List Price:  NOK kr700.29
You save:  NOK kr200.11
DKK kr320.58
List Price:  DKK kr448.84
You save:  DKK kr128.25
NZ$85.35
List Price:  NZ$119.50
You save:  NZ$34.14
د.إ183.58
List Price:  د.إ257.03
You save:  د.إ73.45
৳6,086.89
List Price:  ৳8,522.14
You save:  ৳2,435.24
₹4,406.11
List Price:  ₹6,168.91
You save:  ₹1,762.79
RM211.60
List Price:  RM296.26
You save:  RM84.66
₦76,597.67
List Price:  ₦107,242.87
You save:  ₦30,645.20
₨14,190.18
List Price:  ₨19,867.39
You save:  ₨5,677.20
฿1,619.37
List Price:  ฿2,267.25
You save:  ฿647.88
₺2,057.23
List Price:  ₺2,880.29
You save:  ₺823.05
B$272.20
List Price:  B$381.10
You save:  B$108.90
R885.95
List Price:  R1,240.41
You save:  R354.45
Лв83.75
List Price:  Лв117.26
You save:  Лв33.50
₩69,716.63
List Price:  ₩97,608.87
You save:  ₩27,892.23
₪169.52
List Price:  ₪237.34
You save:  ₪67.82
₱2,873.05
List Price:  ₱4,022.50
You save:  ₱1,149.45
¥7,426.70
List Price:  ¥10,397.98
You save:  ¥2,971.27
MX$937.87
List Price:  MX$1,313.09
You save:  MX$375.22
QR182.54
List Price:  QR255.58
You save:  QR73.03
P718.20
List Price:  P1,005.53
You save:  P287.33
KSh6,458.70
List Price:  KSh9,042.70
You save:  KSh2,584
E£2,424.49
List Price:  E£3,394.48
You save:  E£969.99
ብር7,102.60
List Price:  ብር9,944.21
You save:  ብር2,841.60
Kz45,588.63
List Price:  Kz63,827.73
You save:  Kz18,239.10
CLP$48,399.31
List Price:  CLP$67,762.91
You save:  CLP$19,363.60
CN¥356.46
List Price:  CN¥499.08
You save:  CN¥142.61
RD$3,145.73
List Price:  RD$4,404.27
You save:  RD$1,258.54
DA6,491.70
List Price:  DA9,088.91
You save:  DA2,597.20
FJ$113.07
List Price:  FJ$158.31
You save:  FJ$45.24
Q383.67
List Price:  Q537.17
You save:  Q153.50
GY$10,468.08
List Price:  GY$14,656.15
You save:  GY$4,188.07
ISK kr6,167.76
List Price:  ISK kr8,635.36
You save:  ISK kr2,467.60
DH450.01
List Price:  DH630.06
You save:  DH180.04
L830.88
List Price:  L1,163.30
You save:  L332.42
ден2,628.38
List Price:  ден3,679.94
You save:  ден1,051.56
MOP$402.01
List Price:  MOP$562.85
You save:  MOP$160.83
N$879.83
List Price:  N$1,231.84
You save:  N$352
C$1,842.15
List Price:  C$2,579.16
You save:  C$737
रु7,061.21
List Price:  रु9,886.26
You save:  रु2,825.05
S/176.79
List Price:  S/247.52
You save:  S/70.73
K211.93
List Price:  K296.72
You save:  K84.79
SAR187.57
List Price:  SAR262.62
You save:  SAR75.04
ZK1,182.65
List Price:  ZK1,655.81
You save:  ZK473.15
L218.18
List Price:  L305.47
You save:  L87.29
Kč1,051.46
List Price:  Kč1,472.13
You save:  Kč420.66
Ft17,017.21
List Price:  Ft23,825.45
You save:  Ft6,808.24
SEK kr472.64
List Price:  SEK kr661.74
You save:  SEK kr189.09
ARS$68,822.84
List Price:  ARS$96,357.49
You save:  ARS$27,534.64
Bs345.87
List Price:  Bs484.25
You save:  Bs138.37
COP$202,235.45
List Price:  COP$283,145.81
You save:  COP$80,910.36
₡25,306.81
List Price:  ₡35,431.55
You save:  ₡10,124.74
L1,310.57
List Price:  L1,834.90
You save:  L524.33
₲361,558.37
List Price:  ₲506,210.65
You save:  ₲144,652.28
$U2,000.31
List Price:  $U2,800.60
You save:  $U800.28
zł183.28
List Price:  zł256.61
You save:  zł73.32
Already have an account? Log In

Transcript

We are going to discuss about the border radius. So using border radius property, you can give an element rounded corners. So how for suppose if you have a deal now I'm saying that I'm going to create the element selector because I have a single day in my index. html file. Now I'm saying that big round equals true, right? And I'm saying word equals 200 pixels.

And I'm saying whole body height equals to 250. The bigger fish the big as you can see, it's fine. So how can you rounded your corners, so as you can see, it's by default, something like this, if you want to round your corners, so you can use the border radius Sorry, radius property can cancel the page refresh the page. Now, as you can see, you have just rounded your corners by 10 pixels. That means you are saying that 10 pixel from top left, top right, bottom right, bottom left, okay, fine. But if you are if you want to if you want to give your this okay if you want to assign a particular rounded corners for suppose if I'm saying that 10 pixels from the top left 30 pixels from the top right space and now 70 pixels and now hundred pixels.

What happens Would you please refresh the page. So now we can see you have added a 10 pixel top left and the 30 pixel top right The 70 pixels, your bottom right and hundred pixels for your bottom left if you're seeing that this is the one pixel, okay, as you can see, it's showing one pixel, if you are seeing that only fixes shown like this. But first of all, if you are seeing your worth is 200 pixel, and your height is 200 pixels. And now I'm seeing that Craig, I'm seeing that it's a 400. Now with the big refresh the page now as you can see, you have just created a circuit. So it's a date, if you have a 200 pixel worth important, it doesn't hide and you have now you can add the 400 200 plus 200.

It's a 400. So you're seeing that around the corners 400 pixels. So now you can see it I really like this to strongly depend upon you and your requirements. So border radius property is really useful property if you're working on the templates if you're working if you're creating the dynamic templates or the attractive templates. So I think this is enough during the next lecture, we are going to cover some other topics. Thanks for watching.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.