Free Responsive Website Stuff
HTML Borders & Border Radius

Text box with a Single Border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque. Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum.

Click on code to Hightlite:-
width: 99%; height: 118px; margin: auto; border: 1px solid royalblue; padding-left: 3px; margin-bottom: 1%;

Text box with a Double Border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque. Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum.

Click on code to Hightlite:-
width: 99%; height: auto; margin: auto; border: 4px double royalblue; padding: 5px; margin-bottom: 1%;
Text box with a Single Dotted Border. With all corners have Border Radius

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque. Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum.

Click on code to Hightlite:-
width: 99%; border-radius: 10px; height: auto; margin: auto; border:1px dotted royalblue; padding: 5px; margin-bottom: 1%;
Text box with a Single Dashed Border with border top left radius: 10px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque. Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum.

Click on code to Hightlite:-
width: 99%; border-top-left-radius: 10px; height: auto; margin: auto; border:1px dashed royalblue; padding: 5px; margin-bottom: 1%;
Grooved Border With Top Right Border Radius: 10px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque. Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum.

Click on code to Hightlite:-
width: 99%; border-top-right-radius: 10px; height: auto; margin: auto; border:4px groove gold; padding: 5px; margin-bottom: 1%;
Ridge Border With Bottom Left Border Radius: 10px; Border bottom left Radius: 10px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque. Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum.

Click on code to Hightlite:-
width: 99%; border-bottom-left-radius: 10px; height: auto; margin: auto; 4px ridge royalblue; padding: 5px; margin-bottom: 1%;
Inset Border With Border bottom Right Radius: 10px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque. Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum.

Click on code to Hightlite:-
width: 99%; border-bottom-right-radius: 10px; height: auto; margin: auto; border:1px inset #00ffff; padding: 5px; margin-bottom: 1%;
Inset Border With Border bottom Right Radius: 10px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque. Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum.

Click on code to Hightlite:-
width: 99%; border-bottom-right-radius: 10px; height: auto; margin: auto; border:1px inset #ff0066; padding: 5px; margin-bottom: 1%;
Outset Border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque. Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum.

Click on code to Hightlite:-
width: 99%; height: auto; margin: auto; border:1px inset #ff0066; padding: 5px; margin-bottom: 1%;
4 borders, 4 different styles, 4 different colours

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque. Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum.

Click on code to Hightlite:-
width: 99%; border-radius: 10px; height: auto; margin: auto; border-left: 6px inset #00ff00; border-top: 6px groove #992600; border-right: 6px outset #0066ff; border-bottom: 6px ridge gold; padding: 5px; margin-bottom: 1%;