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
€46.84
List Price:  €65.59
You save:  €18.74
£40.02
List Price:  £56.03
You save:  £16.01
CA$68.85
List Price:  CA$96.39
You save:  CA$27.54
A$77.12
List Price:  A$107.98
You save:  A$30.85
S$68.21
List Price:  S$95.50
You save:  S$27.29
HK$391.10
List Price:  HK$547.57
You save:  HK$156.47
CHF 46.02
List Price:  CHF 64.43
You save:  CHF 18.41
NOK kr554.84
List Price:  NOK kr776.82
You save:  NOK kr221.98
DKK kr349.42
List Price:  DKK kr489.21
You save:  DKK kr139.79
NZ$84.86
List Price:  NZ$118.81
You save:  NZ$33.95
د.إ183.60
List Price:  د.إ257.06
You save:  د.إ73.45
৳5,520.52
List Price:  ৳7,729.18
You save:  ৳2,208.65
₹4,173.28
List Price:  ₹5,842.93
You save:  ₹1,669.64
RM238.32
List Price:  RM333.67
You save:  RM95.35
₦66,243.24
List Price:  ₦92,745.84
You save:  ₦26,502.60
₨13,999.18
List Price:  ₨19,599.98
You save:  ₨5,600.79
฿1,857.12
List Price:  ฿2,600.12
You save:  ฿743
₺1,622.27
List Price:  ₺2,271.31
You save:  ₺649.04
B$259.73
List Price:  B$363.64
You save:  B$103.91
R934.43
List Price:  R1,308.28
You save:  R373.84
Лв91.63
List Price:  Лв128.30
You save:  Лв36.66
₩69,279.33
List Price:  ₩96,996.60
You save:  ₩27,717.27
₪186.71
List Price:  ₪261.41
You save:  ₪74.69
₱2,889.54
List Price:  ₱4,045.59
You save:  ₱1,156.04
¥7,894.37
List Price:  ¥11,052.75
You save:  ¥3,158.38
MX$855.53
List Price:  MX$1,197.81
You save:  MX$342.28
QR183.78
List Price:  QR257.31
You save:  QR73.52
P714.32
List Price:  P1,000.11
You save:  P285.78
KSh6,668.17
List Price:  KSh9,335.98
You save:  KSh2,667.80
E£2,392.69
List Price:  E£3,349.95
You save:  E£957.26
ብር2,866.71
List Price:  ብር4,013.63
You save:  ብር1,146.91
Kz41,718.65
List Price:  Kz58,409.45
You save:  Kz16,690.80
CLP$48,067.30
List Price:  CLP$67,298.07
You save:  CLP$19,230.76
CN¥361.97
List Price:  CN¥506.79
You save:  CN¥144.82
RD$2,943.98
List Price:  RD$4,121.81
You save:  RD$1,177.82
DA6,730.95
List Price:  DA9,423.87
You save:  DA2,692.92
FJ$114.25
List Price:  FJ$159.96
You save:  FJ$45.71
Q390.96
List Price:  Q547.38
You save:  Q156.41
GY$10,529.51
List Price:  GY$14,742.16
You save:  GY$4,212.64
ISK kr7,023.09
List Price:  ISK kr9,832.89
You save:  ISK kr2,809.80
DH508.71
List Price:  DH712.24
You save:  DH203.52
L887.81
List Price:  L1,243.01
You save:  L355.19
ден2,890.32
List Price:  ден4,046.68
You save:  ден1,156.36
MOP$402.89
List Price:  MOP$564.08
You save:  MOP$161.19
N$939.91
List Price:  N$1,315.96
You save:  N$376.04
C$1,851.58
List Price:  C$2,592.36
You save:  C$740.78
रु6,678.15
List Price:  रु9,349.94
You save:  रु2,671.79
S/188.35
List Price:  S/263.70
You save:  S/75.35
K194.24
List Price:  K271.96
You save:  K77.71
SAR187.48
List Price:  SAR262.49
You save:  SAR75
ZK1,347.15
List Price:  ZK1,886.12
You save:  ZK538.96
L233.12
List Price:  L326.39
You save:  L93.26
Kč1,178.64
List Price:  Kč1,650.20
You save:  Kč471.55
Ft18,305.53
List Price:  Ft25,629.21
You save:  Ft7,323.68
SEK kr550.47
List Price:  SEK kr770.71
You save:  SEK kr220.23
ARS$44,067.56
List Price:  ARS$61,698.11
You save:  ARS$17,630.55
Bs347.73
List Price:  Bs486.86
You save:  Bs139.12
COP$193,896.94
List Price:  COP$271,471.23
You save:  COP$77,574.29
₡25,583.92
List Price:  ₡35,819.54
You save:  ₡10,235.61
L1,243.01
List Price:  L1,740.31
You save:  L497.30
₲375,896.46
List Price:  ₲526,285.13
You save:  ₲150,388.66
$U1,928.40
List Price:  $U2,699.91
You save:  $U771.51
zł203.42
List Price:  zł284.80
You save:  zł81.38
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.