how to make round corners borders using CSS
so today i was creating this cool website, and i wanted to make the border rounded instead of the default squared lines. i will show you how to make round corners borders using css [3360], Last Updated: Mon Jun 24, 2024
Webune Support
Mon Nov 08, 2010
0 Comments
762 Visits
so today i was creating this cool website, and i wanted to make the border rounded instead of the default squared lines.
for example i have this code:
<div style="border: 1px solid #CCC;padding:10px;width:300px;">Hello, Webune has great tutorials!</div>
the above code will look like this:
Demo:
to make the border rounds, you can use the border-radius property like this:
Demo:
NOTE: i have tested this to work on mozilla firefox. i also tested on internet explorer 8 and it doest NOT work.
it works on firefox, but only if i use the -moz-border-radius
here is a snapshot of how it looks:
to try it
for example i have this code:
<div style="border: 1px solid #CCC;padding:10px;width:300px;">Hello, Webune has great tutorials!</div>
the above code will look like this:
Demo:
Hello, Webune has great tutorials!
to make the border rounds, you can use the border-radius property like this:
<div style="border: 1px solid #CCC;border-radius: 15px;-moz-border-radius: 15px;padding:10px;width:300px">Hello, Webune has great tutorials!</div>
Demo:
Hello, Webune has great tutorials!
NOTE: i have tested this to work on mozilla firefox. i also tested on internet explorer 8 and it doest NOT work.
it works on firefox, but only if i use the -moz-border-radius
here is a snapshot of how it looks:
to try it