Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .radius-bg { width: 250px; height: 200px; background: #ccc; border: 4px solid #1c87c9; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; } .radius-img { width: 250px; height: 200px; margin-top: 20px; background-img: lightgray; background: url('/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg'); background-position: left top; background-repeat: repeat; border: 2px solid #1c87c9; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; } </style> </head> <body> <h1> Border-radius example with background color</h1> <div class="radius-bg"></div> <h2> Border-radius example with background image</h2> <div class="radius-img"></div> </body> </html>