3 Impressive CSS Border Examples

Please note that the rounded corners on examples 2 and 3 are displayed properly only by Firefox and Safari browsers.

1.

Text example

Code:

<style>.border1 {background: #FFFFFF url(IMAGE_PATH) no-repeat 50% 50%;border: 12px dashed #1B1A19;height: 307px;margin: 0 auto;padding: 36px;width: 250px;}.border1 p {color: #FFF;margin: 10px 10px 0 0;font: bold 36px Georgia, 'Times New Roman', Times, serif;text-align: right;}</style><div class="border1"><p> Text example </p></div>

---

2.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code:

<style>.border2 {-moz-border-radius: 8px;-webkit-border-radius: 8px;background-color: CornflowerBlue;border: 2px outset CornflowerBlue;margin: 0 auto;padding: 1px 10px;text-align: center;width: 250px;}.border2 p {border: 3px dashed AliceBlue;color: #FFFFFF;font-size: 16px;padding: 10px;}</style><div class="border2"><p> Text example </p></div>

---

3.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code:

<style>div.border3 {-moz-border-radius-bottomright: 5px;-moz-border-radius-topright: 5px;-webkit-border-radius-bottom-right: 5px;-webkit-border-radius-top-right: 5px;border-color: #AABBCC #AABBCC #AABBCC transparent;border-style: solid;border-width: 15px 15px 15px 20px;margin: 0 auto;padding: 0;width: 500px;}div.border3 p {margin: 0;padding: 5px;text-align: right;}</style><div class="border3"><p> Text example </p></div>

Screenshot for people with non-capable browsers:


(notice the rounded corners)

You may also want to take a look at our Shadow Effect with CSS3.